객체 리터럴

JavaScript는 아래와 같이 다양한 객체 생성 방법을 지원합니다.

• 객체 리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스 (ES6 도입)

프로퍼티

• 프로퍼티 키로는 빈 문자열을 포함하는 모든 문자열 or 심벌 값이 가능하지만 일반적으로 문자열을 사용합니다.
  • 프로퍼티 키는 식별자 역할을 하지만 식별자 네이밍 규칙을 따라야 하는 것은 아닙니다. 다만 규칙을 따르지 않는 경우 반드시 따옴표를 사용해야 합니다.
    • 해당 프로퍼티에 접근할 때 규칙을 따르지 않은 경우에는 반드시 대괄호 표기법을 사용해야 합니다.
    • 프로퍼티 키가 숫자로 이뤄진 문자열인 경우에는 대괄표 표기법을 사용할 때 따옴표를 생략할 수 있습니다.
  • 문자열이나 심벌 값 외의 값(숫자 리터럴 등)을 사용하면 암묵적 타입 변환을 통해 (따옴표는 붙지 않지만) 문자열이 됩니다.

    var test = { 0: 0, 1: 1, 2: 2 };

  • 프로퍼티 키를 중복 선언하면 늦게 선언한 프로퍼티가 일찍 선언한 프로퍼티를 덮어씁니다.

    var test = { 0: 0, 1: 1, 0: 2 };
    console.log(test[0]); // 2

• 프로퍼티 값으로는 자바스크립드에서 사용할 수 있는 모든 값이 가능합니다.
  • JavaScript 함수는 일급 객체이기 때문에 값으로 취급할 수 있다. 즉, 프로퍼티 값으로도 사용 가능하며 이때 일반 함수와 구분하기 위해 메서드라고 부른다.

• 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환합니다.

ES6에서 추가된 확장 기능

• 프로퍼티 키 생략 (property shorthand)

  var x = 1, y = 2;
  // ES5
  var obj = { x: x, y: y };
  // ES6
  var obj = { x, y };

• 계산된 프로퍼티 이름 (computed property name)

  var prefix = 'pure-water';
  var i = 0;
  
  // ES5
  var obj = {};
  obj[prefix + '-' + i++] = i
  
  // ES6
  var obj = { [`${prefix}-${i++}`] : i };

• 메서드 축약 표현

  // ES5
  var obj = {
    sayHello: function() {
      return 'hello';
    }
  };
  
  // ES6
  var obj = {
    sayHello() {
      return 'hello';
    }
  };

  • ES6 사양부터 메서드에 대한 정의가 명확하게 규정되면서 위와 같이 메서드 축약 표현으로 정의된 함수만 메서드라 부르기로 했습니다. 이는 일반적으로 프로퍼티에 할당한 함수와 다르게 동작하는 부분들이 존재합니다.
    1. 메서드는 인스턴스를 생성할 수 없는 non-constructor 입니다.
       • 그렇기에 prototype 프로퍼티가 없고 프로토타입도 생성하지 않습니다.
    2. 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖습니다. super 참조는 내부 슬롯 [[HomeObject]]를 사용하여 수퍼클래스의 메서드를 참조하기 때문에 메서드는 super 키워드를 사용할 수 있습니다.

       const derived = {
         __proto__: obj,
         sayHello() {
           return `${super.sayHello()}. how are you?`;
         }
       };

  • 이처럼 본연의 기능을 추가하고 의미적으로 맞지 않는 기능은 제거했기 때문에 메서드를 정의할 때 익명 함수 표현식을 할당했던 ES6 이전 방식은 지양하는 것이 좋습니다.