자바스크립트 객체(Object)

객체가 무엇인가요?

서랍장을 상상해보세요. 서랍장 안 파일은 프로퍼티, 파일 각각에 붙어있는 이름표는 객체의 키라고 생각하세요. 객체에선 키를 이용해 프로퍼티를 쉽게 찾을 수 있습니다.

 

객체의 구성요소는?

중괄호를 이용해 만듭니다.

중괄호 안에는 key: value 쌍으로 구성된 property를 여러개 넣을 수 있습니다.

key는 문자형, value엔 모든 자료형이 들어갈 수 있습니다.

property key 는 property name이라고도 부릅니다.

 

객체 어떻게 만들어요?

let user = new Object(); // '객체 생성자' 문법
let user = {}; // '객체 리터럴' 문법

 

리터럴과 프로퍼티

중괄호 안에는 key: value 쌍으로 구성된 property가 들어갑니다.

property key는 property 이름 혹은 식별자 라고도 부릅니다.

 

프로퍼티 값 얻기

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};

alert( user.name );  // John
alert( user.age );  // 30

프로퍼티 삭제하기

delete user.age;

여러 단어의 키는 따옴표로 묶어야 합니다.

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // 복수의 단어는 따옴표로 묶어야 합니다.
};

마지막 프로퍼티 끝은 쉼표로 끝날 수 있습니다.

let user = {
  name: "John",
  age: 30,
}

이런 쉼표를 'trailing', 혹은 'hanging' 쉼표 라고 부릅니다. 이렇게 끝에 쉼표를 붙이면 모든 프로퍼티가 유사한 형태를 갖기 때문에 프로퍼티를 추가, 삭제, 이동하는게 쉬워집니다.

 

대괄호 표기법

여러 단어의 키로 프로퍼티를 만든 경우, 점 표기법을 사용해 프로퍼티 값을 읽을 수 없습니다.

// 문법 에러가 발생합니다.
user.likes birds = true

이럴 때를 대비하여 대괄호표기법(square bracket notation)을 사용할 수 있습니다.

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];