원시 타입은 단 하나의 값만 나타낼 수 있고 불변이지만,
객체는 여러 가지 값이나 복잡한 값을 나타낼 수 있고, 변할 수도 있습니다.
객체
객체의 본질은 컨테이너.
컨테이너의 내용물은 시간이 지나면서 바뀔 수 있지만, 내용물이 바뀐다고 컨테이너가 바뀌는 건 아닙니다. 즉, 여전히 같은 객체.
객체가 사용하는 리터럴 문법: 중괄호( { } )
중괄호는 한 쌍 ➜ 객체가 어디에서 시작하고 어디에서 끝나는지 나타냄.
const obj = {}; // 빈 객체프로퍼티property : 객체의 콘텐츠 (멤버member라고도 함)
- 이름(키)와 값으로 구성.
- 프로퍼티의 이름은 반드시 문자열 또는 심볼.
- 프로퍼티의 값은 어떤 타입이든 상관없고 다른 객체여도 괜찮.
obj.color = "yellow"; // 객체 obj에 color 프로퍼티 추가.- 프로퍼티 이름에 유효한 식별자를 써야 멤버 접근 연산자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에 저장된 객체를 수정했지만, obj는 항상 같은 객체를 가리키고 있습니다. obj에 저장한 것이 문자열이나 숫자, 기타 다른 원시 값이었다면 수정할 때마다 다른 값을 가리켰을 겁니다.
➜ obj는 계속 같은 객체를 가리키고, 바뀐 것은 객체의 프로퍼티.
객체 리터럴 문법에서는 객체를 만드는 동시에 프로퍼티를 만들 수 있습니다.
- 중괄호 안에서 각 프로퍼티를 쉼표로 구분하고, 프로퍼티 이름과 값은 콜론으로 구분.
아래 예제에서는 객체 리터럴 문법에 따라 세 자기 객체를 만들었습니다.
- sam1과 sam2의 프로퍼티는 같지만, 둘은 서로 다른 객체.
(원시 값과는 반대. 값이 숫자 3인 두 변수는 같은 원시 값을 가리킵니다.) - sam3의 classification 프로퍼티는 그 자체가 객체.
const sam1 = {
name: 'Sam',
age: 4,
}
const sam2 = { name: 'Sam', age: 4 }; // 한 줄로 선언.
const sam3 = {
name: 'Sam',
classification: { // 프로퍼티 값도 객체가 될 수 있습니다.
kingdom: 'Anamalia',
phylum: 'Choradata',
class: 'Mamalia',
order: 'Carnivoria',
family: 'Felidae',
subfamily: 'Felinae',
genus: 'Felis',
species: 'catus',
}
};sam3의 family에 접근할 때 큰따옴표, 작은따옴표, 백틱 사용 가능. (여기서는 큰따옴표)
sam3.classification.family; // "Felidae"
sam3["classification"].family; // "Felidae"
sam3.classification["family"]; // "Felidae"
sam3["classification"]["family"]; // "Felidae"객체에 함수를 담을 수도 있습니다.
sam3.speak = function() { return "Meow!"; }; // sam3에 함수 추가.
sam3.spack(); // 함수 뒤에 괄호를 붙여 함수를 호출.객체에서 프로퍼티를 제거할 때: delete 연산자 사용.
delete sam3.classification; // classification 트리 전체 삭제.
delete sam3.speak; // speak 함수 삭제.
👋 https://github.com/ujw0712