[모던 자바스크립트 Deep Dive] 10장 객체 리터럴

객체란? + 객체 리터럴로 객체 생성하기

자바스크립트는 객체 기반의 언어이다.
객체란, 다양한 타입의 값을 하나의 단위로 구성한 자료구조다. 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있으며, 함수도 프로퍼티 값으로 사용할 수 있다.
프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 "메서드"라 한다.

즉, 객체는 프로퍼티와 메서드로 구성된 집합체이다.

var counter = {
  num: 0; // 프로퍼티: 객체의 상태를 나타내는 값
  increase: function() { // 메서드: 프로퍼티를 참조하고 조작할 수 있는 동작
    this.num++;
  }
}

자바스크립트는 프로토타입 기반 객체지향 언어로서 다양한 객체 생성 방법을 지원한다.

• 객체 리터럴, Object 생성자 함수, 생성자 함수, Object.create 메서드, 클래스
• 객체 리터럴은 중괄호 내에 0개 이상의 프로퍼티를 정의하며, 자바스크립트의 유연함과 강력함을 대표하는 객체 생성 방식이다.

프로퍼티 + 메서드

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다. 프로퍼티를 나열할 때는 쉼표로 구분한다.

메서드는 객체에 묶여 있는 함수이다.

• 키: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
• 값: 자바스크립트에서 사용할 수 있는 모든 값

키는 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할을 한다. 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다.

var person = {
  firstName: 'So-Yeon',
  'last-name': 'Lee',
};

프로퍼티 키를 동적으로 생성할 수도 있다. 이 경우에는 프로퍼티 키로 사용할 표현식을 대괄호로 묶어야 한다.

var obj = {};
var key = 'hello';

obj[key] = 'world';
console.log(obj); // {hello: 'world'}

프로퍼티 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다.

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

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

이미 존재하는 키에 프로퍼티 키를 중복하면 나중에 선언한 프로퍼티가 덮어쓴다.

var foo = {
  name: 'Lee',
  name: 'Kim',
};

console.log(foo); // {name: 'Kim'}

프로퍼티에 접근하는 방법

var person = {
  name: 'Lee',
};

console.log(person.name); // Lee
console.log(person['name']); // Lee

console.log(person[name]); // ReferenceError: name is not defined
console.log(person.age); // undefined

• 마침표 표기법

  • 유효한 변수 식별자인 속성만 접근 가능 (숫자로 시작하거나, 특수 문자 포함 불가)

• 대괄호 표기법

  • 모든 문자열 속성에 접근 가능
  • 대괄호 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다.
  • 단, 키가 숫자로 이뤄진 문자열인 경우, 따옴표를 생략할 수 있다.

var 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']; // 10

✏️ person.last-name의 동작이 환경에 따라 다른 이유는?

• Node.js

  • 자바스크립트 엔진은 person.last를 먼저 평가하기 때문에 person.last는 undefined으로 평가된다.
  • 따라서 person.last-name은 undefined-name과 같다.
  • name이라는 식별자 선언이 없으므로 ReferenceError: name is not defined 에러가 발생한다.

• 브라우저

  • 브라우저에서는 name이라는 전역 변수가 암묵적으로 존재한다. name은 창의 이름을 가리키며, 기본값은 빈 문자열이다.
  • 따라서 person.last-name은 undefined-''과 같으므로 NaN이 된다.

프로퍼티 값 갱신

var person = {
  name: 'Lee',
};

person.name = 'Kim';
console.log(person); // {name: 'Kim'}

프로퍼티 동적 생성

var person = {
  name: 'Lee',
};

person.age = 20;
console.log(person); // {name: 'Lee', age: 20}

프로퍼티 삭제

var person = {
  name: 'Lee',
};

person.age = 20;

delete person.age;
delete person.address; // 존재하지 않는 프로퍼티를 삭제하면, 에러 없이 무시된다

console.log(person); // {name: 'Lee'}

ES6에서 추가된 객체 리터럴의 확장 기능

1. 변수 이름과 프로퍼티 키가 동일한 이름이면, 프로퍼티 키를 생략할 수 있다.

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

2. 프로퍼티 키를 동적으로 생성할 수 있다.

   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}

3. 메서드를 정의할 때 function 키워드를 생략한 축약 표현을 사용할 수 있다.

   const obj = {
     name: 'Lee',
   
     sayHi() {
       console.log('Hi! ' + this.name);
     },
   };
   
   obj.sayHi(); // Hi! Lee