자바스크립트 객체 javascript Object

객체는 여러가지 값이나 복잡한 값을 나타낼 수 있으며, 변할 수도 있습니다. 객체의 본질은 컨테이너입니다. 컨테이너의 내용물은 시간이 지나면서 바뀔 수 있지만, 내용물이 바뀐다고 컨테이너가 바뀌는 건 아닙니다. 즉, 여전히 같은 객체입니다. 객체에도 중괄호 { }를 사용하는 리터럴 문법이 있습니다. 중괄호는 한쌍이므로 객체가 어디서 시작하고 어디에서 끝나는지 나타낼 수 있습니다.

객체의 컨텐츠는 프로퍼티property 또는 멤버member라고 부릅니다. 프로퍼티는 키와 값으로 구성됩니다. 프로퍼티 이름은 반드시 문자열 또는 심볼어야 하며, 값은 어떤 타입이든 상관없고 다른 객체여도 괜찮습니다. obj에 color 프로퍼티를 추가합시다.

const obj = {} // 빈 객체
obj.color = "yellow";

프로퍼티 이름에 유효한 식별자를 써야 멤버 접근 연산자member access operator ( . '점 연산자' )를 사용할 수 있습니다. 프로퍼티 이름에 유효한 식별자가 아닌 이름을 쓴다면 계산된 멤버 접근 연산자 computed member access operator( [ ] '대괄호' )를 써야 합니다. 프로퍼티 이름이 유효한 식별자여도 대괄호로 접근할 수 있습니다.

obj["not an identifier"] = 3;
obj["not an identifier"]; // 3
obj["color"]; // yellow

심볼 프로퍼티에 접근할 때도 대괄호를 사용합니다.

const SIZE = Symbol();
obj[SIZE] = 8;
obj[SIZE]; // 8

 

여기까지 obj에는 3가지 프로퍼티가 있습니다. 
- color, 유효한 식별자 문자열
- not an identifier, 유효한 식별자가 아닌 문자열
- SIZE, 심볼

---

obj는 빈 객체로 만들었지만, 객체 리터럴 문법에서는 객체를 만드는 동시에 프로퍼티를 만들 수 있습니다. 중괄호 안에서 각 프로퍼티를 쉼표로 구분하고, 프로퍼티 이름과 값은 콜론으로 구분합니다.

 

const sam1 = {
  name: 'Sam',
  age: 4
};

const sam2 = { name: 'Sam', age: 4 }; // 한 줄로 선언

const sam3 = {
  name: 'Sam',
  classification : { // 프로퍼티 값도 객체가 될 수 있습니다.
    kingdom: 'Anamalia',
    phylum: 'Chordata',
    class: 'Mamalia',
    order: 'Carnivoria',
    family: 'Felidae',
    subfamily: 'Felinae',
    genus: 'Felis',
    species: 'catus'
  }
};

이 예제에서는 객체 리터럴 문법에 따라 3가지 객체를 만들었습니다. sam1과 sma2의 프로퍼티는 똑같지만, 둘은 서로 다른 객체입니다. 원시 값과는 반대입니다(값이 숫자 3인 두 변수는 같은 원시 값을 가리킵니다). sam3의 classification 프로퍼티는 그 자체가 객체입니다. sam3의 family에 접근하는 방법은 여러가지 입니다. 여기서는 큰따옴표만 썻지만, 작은따옴표나 백틱을 써도 됩니다.

sam3.classification.family; // Felidae
sam3["classification"].family; // Felidae
sam3.classification["family"]; // Felidae
sam3["classification"]["family"]; // Felidae

 

객체에 함수를 담을 수도 있습니다. sam3에 함수를 추가 할 때는 아래와 같이 합니다.

sam3.speak = function() {return "Meow!"; };

 

이제 함수 뒤에 괄호를 붙여 함수를 호출할 수 있습니다.

sam3.speak(); // "Meow!"

 

마지막으로, 객체에서 프로퍼티를 제거할 때는 delete 연산자를 사용합니다.

delete sam3.classification; // classification 트리 전체가 삭제
delete sam3.speak; // speak 함수가 삭제

참고 : 러닝 자바스크립트 ES6로 제대로 입문하는 모던 자바스크립트 웹 개발 3장