10 - 객체 리터럴

모던 자바스크립트 Deep Dive 정리

객체란?

▶ 프로퍼티

▷ 객체의 상태를 나타내는 값(data)

 

▶ 메서드

▷ 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)

 

▶ 인스턴스

▷ 클래스에 의해 생성되어 메모리에 저장된 실체

▷ 클래스는 인스턴스를 생성하기 위한 템플릿의 역할을 한다

 

프로퍼티

▶ 프로퍼티 키는 반드시 식별자 네이밍 규칙을 따라야 하는 것은 아니다

▷ 하지만 식별자 네이밍 규칙을 따르지 않는 프로퍼티 키는 반드시 따옴표를 사용해야 한다

▷ 예시

 

const person = {
  firstName: 'Harry', // 식별자 네이밍 규칙을 준수하는 프로퍼티 키
  'last-name': 'Kane'   // 식별자 네이밍 규칙을 준수하지 않는 프로퍼티 키
};

console.log(person); // {firstName: "Harry", last-name: "Kane"}

 

▷ 프로퍼티 키로 숫자 리터럴을 사용하면 따옴표는 붙지 않지만 내부적으로는 문자열로 변환된다

▷ 예시

 

const foo = {
  0: 1,
  1: 2,
  2: 3
};

console.log(foo); // {0: 1, 1: 2, 2: 3}

 

프로퍼티 접근

▶ 대괄표 표기법을 사용하는 경우, 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다

▷ 예시

 

const person = {
  name: 'Lee'
};

// 대괄호 표기법 -> 문자열로 감싸진 프로퍼티 키만 가능
console.log(person[name]); // ReferenceError: name is not defined
// 에러가 안나게 고치려면 person['name'] 이렇게 고쳐야 함
// 만약 name 변수가 문자열 'name'을 미리 저장하고 있으면 가능

// 마침표 표기법 -> 자유롭게 가능
console.log(person.name); // Lee

 

▶ 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다

▶ 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있다

▷ 예시

 

const person = {
  'last-name': 'Lee',
  1: 10
};

person.'last-name';  // -> SyntaxError: Unexpected string
person.last-name;    // -> 브라우저 환경: NaN
                     // -> Node.js 환경: ReferenceError: name is not defined
person[last-name];   // -> ReferenceError: last is not defined
person['last-name']; // -> Lee

// 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있다.
person.1;     // -> SyntaxError: Unexpected number
person.'1';   // -> SyntaxError: Unexpected string
person[1];    // -> 10 : person[1] -> person['1']
person['1'];  // -> 10

 

ES6의 객체 리터럴 추가기능

▶ 프로퍼티 축약 표현

▷ 프로퍼티 값으로 변수를 사용하는 경우, 변수 이름과 프로퍼티 키가 동일한 이름일때 프로퍼티 키를 생략할 수 있다

▷ 예시

 

// ES6
let x = 1, y = 2;

// 프로퍼티 축약 표현
const obj = { x, y };

console.log(obj); // {x: 1, y: 2}

 

▶ 계산된 프로퍼티 이름(키)

▷ 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 이름(키)을 동적으로 생성할 수 있다

 

// ES5
var prefix = 'prop';
var i = 0;

var obj = {};

// 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;

console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}

 

▷ ES6에서는 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다

 

// ES6
const prefix = 'prop';
let i = 0;

// 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성
const obj = {
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i
};

console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}

 

▶ 메서드 축약 표현

▷ ES6 에서는 메서드를 정의할 때 클래스처럼 function 키워드를 생략하고 정의할 수 있다

 

// ES6
const obj = {
  name: 'Lee',
  // 메서드 축약 표현
  sayHi() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // Hi! Lee