JS 객체(1)

1. 객체 란

   - 객체는 여러가지 값을 모아서 이름을 통해 값을 저장하고 가져올 수 있음
   - 순서 없는 집합이며, 각 프로퍼티에는 이름과 값이 있음
   - "프로토타입"으로 불리는 다른 객체에서 프로퍼티를 상속할 수 있음

   -  프로퍼티 속성
       1) 쓰기 가능(writable) :  프로퍼티에 값을 설정 여부
       2) 열거 가능(enumerable) : for/in 루프에 프로퍼티 이름 반환여부
       3) 변경 가능(configurable) : 프로퍼티 삭제 여부, 속정 변경 여부

 

2. 객체 생성

    - 객체 생성 시 new, object.create() 함수를 사용
    - 객체 리터럴 
       1) 가장 단순한 형태의 객체 생성 →  {이름:값}
       2) 프로퍼티명은 문자열 리터럴이고 빈 문자도 허용
       3) 마지막 프로퍼티 뒤에 콤마 가능

let empty = {}; // 프로퍼티가 없는 객체
let poing = { x: 0, y: 0};  // 숫자 프로퍼티 두개
let p2 = { x: point.x, y: point.y + 1 } // 좀 더 복잡한 값
let book = {
	"main title": "Javascript", // 이 프로퍼티 이름에는 스페이스와 파이픈이
    "sub-title": "The Definition Guide", // 들어 있으므로 문자열 리터럴 사용
    for: "all audiences", // for는 예약어지만 따움표를 쓰지 않습니다.
    author: {             // 해당 프로퍼티 값을 객체
    	firstname: "David", 
        surname : "Flanagan"
    }

}

     - new 
         1) 새 객체 생성하고 초기화
         2) new 키워드 뒤에는 반드시 함수 호출(생성자 호출)이 있어야함

// 자바스크립트 내장된 생성자
let o = new Object() //빈 객체를 만든다. {}와 같음
let a = new Array() // 빈 배열을 만든다. []와 같음
let d = new Date() // 현재 시간을 나타내는 Data 객체를 만든다.
let r = new Map() // 키와 값을 연결하는 Map 객체를 만든다.

 

     - 프로토타입
         1) 자바스크립트 객체는 거의 대부분은 자신과 연결된 두 번째 객체를 가짐
         2) 두 번째 객체를 프로토타입이라고 부르며, 첫 번째 객체는 프로토타입에서
             프로퍼티를 상속
         3) 객체 리터럴을 사용해 생성된 객체는 모두 같은 프로토타입 객체를 가짐
              (object.prototype 코드에서 상속받음)
         4) new 키워드와 생성자를 사용해 만든 객체는 생성자 함수의 prototype 프로퍼티 값
             을 자신의 프로토타입으로 사용(object.prototype 코드에서 상속받음)
              → new Array() : Array.prototype에서 상속,  new Date() : Date.prototype에서 상속

    - Object.create()

        1) 첫 번째 인자를 프로토 타입으로 삼아 새 객체를 생성

let obj1 = Object.create({x:1, y:2}); // obj1은 x와 y 프로퍼티를 상속
res = obj1.x + obj2.y // res → 3

let obj2 = Object.create(null)  // obj2는 프로퍼티나 메소드를 상속하지 않는다.

let obj3 = Object.create(Object.prototype) // obj3는 {}나 new Object()와 같다.

// Object.create()를 사용하는 목적은 서드 파티 라이브러리에서 객체 
// 변경하는 사고를 막기위함
let obj = {x: "don't change this value"}
library.function(Object.create(obj)); // 의도치 않은 변경에 대한 방어

 

3. 프로퍼티 검색, 설정

   -  프로퍼티 값에 접근할 때는 점(.), 대괄호([]) 연산자 사용
   -  대괄호 연산자 안에 문자열을 사용하는 연관(associative array) 배열을 사용하면
      식별자가 변경되는 프로그래밍을 할때 유용

let author = book.author // book의 author 프로퍼티를 가져온다.
let name = author.surname // author의 surname 프로퍼티를 가져온다.
let title = book["main title"]  // book의 main title 프로퍼티를 가져온다.
book.edition = 7  // book에 edition 프로퍼티를 만든다.
book["main title"] = "ECMAScript" // main title 프로퍼트를 값을 변경한다.


// 연관 배열을 활용하는 방법
let addr = "";
for(let i = 0; i < 4; i++) {
	addr += customer [`addrress${i}`] + "\n";
}

function addstock(portfolio, stockname, shares) {
	portofolio[stockname] = shares
}

function computeValue(portfolio) {
	let total = 0.0;
    for(let stock in portofolio) {        // portfolio의 각 stock에 의해
    	let shares = portofolio[stock];   // 보유량을 가져온다
        let price = getQuote(stock);      // 주식 가격을 가져온다
        total += shares * price;          // total 주식을 합산한다.
    }
    
    return total // total 값을 반환
}

   - 상속 
       1) 객체에는 자제 프로퍼티, 프로토타입 객체에서 상속하는 프로퍼티가 존재
       2) 아래 방식 순서로 프로퍼티 정보를 가져온다.

             자신의 객체 → 자신의 프로토타입 → Object.prototype → null
             (사용자가 원하는 프로퍼티가 없는 경우 화살표 방향으로 이동하면서 찾는다.)

let obj = {};    //obj는 Object.prototype에서 객체 메서드를 상속한다.
obj.x = 1;       // 이제 자체 프로퍼티 x가 생성된다.
let p = Object.create(obj) // p는 o와 Object.property에서 프로퍼티를 상속받는다.
p.y = 2                    // 자체 프로퍼티 y가 생성된다.
let q = Object.create(p)   // q는 p,o,Object.proptotype에서 프로퍼티를 상속받는다.
q.z = 3;                   // 자체 프로퍼티 z가 생성된다.
let f = q.toString();      // toString은 Object.prototype에서 상속받는다.
q.x = q.y                  // => 3,  x와 y는 o와 p에서 상속된다.


let unitcircle = {r:1}l   // 상속할 객체
let c = Object.create(unitcircle)  // c는 프로퍼티 r을 상속한다.
c.x = 1; c.y = 1;                  // c에 자체 프로퍼티 두 개를 정의한다.
c.r = 2;                           // C가 상속받은 프로퍼티를 덮어쓴다.
unitcicle.r				           // => 1, 프로토타입은 영향을 받지 않는다.

  - 프로퍼티 접근 에러
      1) 존재하지 않는 프로퍼티를 검색하는 것은 에러가 아니다.
          하지만 존재하지 않는 객체의 프로퍼티를 찾는것은 에러가 발생
         

// 프로퍼티가 없는 경우 undefined를 리턴함
// 명시적인 방법
let surname = undefied;
if(book) {
	if (book.author){
    	surname = book.author.surname;
    }
}

// 간소한 방법
surname = book && book.author && book.author.surname;

// 조건부 프로퍼티 활용
let surname = book?.author?.surname;