모던 자바스크립트

Shorthand Properties

객체는 new Object(), Object.create() 또는 리터럴(literal) 표기법(initializer 표기법)을 사용하여 초기화 될 수 있습니다. 객체 초기자(object initializer)는 0개 이상인 객체 속성명, 관련값 쌍 목록입니다. ES6+ 부터 객체 초기자(initializer)에 메서드 정의를 위한 더 짧은 구문이 도입되었습니다. 이는 메서드 명에 할당된 함수를 위한 단축입니다.

영상 강의

PART 1

codepen



예제

속기형 속성 작성법을 사용하면 객체의 속성 정의가 편리해집니다.

var animations = ['원령 공주', '센과 치히로의 대모험', '명탐정 코난', '에반게리온'];

var movies = ['인디애나 존스', '살인자의 기억법', '범죄 도시'];

var music = [
  {
    song: '선물',
    singer: '멜로망스'
  },
  {
    song: '피카부 (Peek-A-Boo)',
    singer: 'Red Velvet (레드벨벳)'
  },
];

기존 코드는 객체의 속성과 값의 이름이 동일한 경우 값을 할당하기 위해 다음과 같이 작성했습니다.

var favorites = {
  animations: animations,
  movies: movies,
  music: music
};

ES6+ 부터는 객체의 속기형 속성 방법을 사용해 보다 코드가 간결해집니다.

const favorites = { animations, movies, music };

// 또는

var favorites = {
  animations,
  movies,
  music
};

코드 비교

ES6+의 기본 매개 변수, 화살표 함수식, 속기형 속성 작성법 등이 반영된 코드와 기존 코드를 비교해보세요.

ES5 코드

function isRequired(name) {
  throw new Error(name + '전달인자는 필수입니다.');
}

function Mouse(name, weight, type) {

  if (!name) { isRequired('name'); }
  weight = weight || '100g';
  type   = type   || 'Bluetooth';

  return {
    name: name,
    weight: weight,
    type: type
  };

}

var magic_mouse_2 = new Mouse('Magic Mouse 2', '99g');
var mx_ergo       = new Mouse('MX ERGO', '2g');

ES6+ 코드

const isRequired = name => new Error(`${name} 전달인자는 필수입니다.`);

function Mouse( name=isRequired('name'), weight='100g', type='bluetooth' ) {
  return { name, weight, type };
}

const magic_mouse_2 = new Mouse('Magic Mouse 2', '99g');
const mx_ergo       = new Mouse('MX ERGO', '2g');

참고

← Object Enhancements →