[JS] 객체(Object)

객체 또는 오브젝트(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',
};