객체
또는 오브젝트(Object)
는 JavaScript
의 거의 모든 부분과 연결되는 중요한 개념입니다. 따라서 JavaScript
를 잘 다루려면 객체에 대해 잘 이해하는 것이 중요합니다.
객체는 new Object()
또는 중괄호 {}
로 만들 수 있고, key: value
의 쌍으로 이루어진 데이터 구조입니다. key
는 문자형, value
는 모든 자료형이 될 수 있습니다. 각 쌍은 쉼표 ,
로 구분됩니다.
let obj = new Object();
// or
let obj = {};
let food = {
type: 'snack',
kcal: 120,
};
key
는 프로퍼티(Property)
또는 속성
이라고 부르고, value
는 값
이라고 부릅니다.
위의 food
객체에는 type
이라는 프로퍼티
에 snack
이라는 값이 있고, kcal
이라는 프로퍼티
에 120
이라는 값이 있습니다.
.
연산자 또는 대괄호 []
를 사용하면 객체 프로퍼티
의 값
을 읽어올 수 있습니다.
let food = {
type: 'snack',
kcal: 120,
};
console.log(food.type); // 'snack'
console.log(food['type']); // 'snack'
console.log(food.kcal); // 120
console.log(food['kcal']); // 120
=
연산자를 사용해서 객체 프로퍼티
에 값을 쓸 수 있습니다.
let food = {
type: 'snack',
kcal: 120,
};
console.log(food.kcal); // 120
food.kcal = 90;
console.log(food.kcal); // 90
값 쓰기와 같은 형식으로 새로운 객체 프로퍼티
에 값을 쓰면 프로퍼티
가 생성됩니다.
let food = {
type: 'snack',
kcal: 120,
};
console.log(food.color); // undefined
food.color = 'brown';
console.log(food.color); // 'brown'
delete
연산자를 사용해서 객체 프로퍼티
를 삭제할 수 있습니다.
let food = {
type: 'snack',
kcal: 120,
color: 'brown',
};
console.log(food.color); // 'brown'
delete food.color;
console.log(food.color); // undefined
변수값에 따라 유동적으로 객체의 프로퍼티
에 접근해야하는 경우가 있습니다. 이럴때는 대괄호 []
안에 변수를 대입해서 접근할 수 있습니다.
let food = {
type: 'snack',
kcal: 120,
};
let key = 'type';
console.log(food[key]); // 'snack'
key = 'kcal';
console.log(food[key]); // 90
console.log(food.key); // undefined
객체의 프로퍼티
목록이 필요한 경우에는 Object.keys()
메소드를 사용해서 배열로 받아올 수 있습니다.
let food = {
type: 'snack',
kcal: 120,
};
const keys = Object.keys(food);
console.log(keys); // ['type', 'kcal']
객체 프로퍼티
의 값
에는 객체가 올 수도 있습니다. 이런 중첩객체의 프로퍼티
에 접근하려면 .
연산자를 중첩해서 사용하면 됩니다.
let menu = {
burgur: {
price: '$12',
kcal: 480,
},
pizza: {
price: '$18',
kcal: 490,
},
};
console.log(menu.burgur.price); // '$12'
console.log(menu.pizza.kcal); // 490
const
로 선언된 객체는 수정될 수 있지만, 새로운 객체로 덮어쓸 수는 없습니다.
const product = {
price: '$10',
};
product.price = '$20'; // ok
product = { // error
price: '$20',
};