[Javascript] ES6 문법 6.1 - 객체 확장 표현식

ES6 문법 6.1 - 객체 확장 표현식

객체 확장 표현식 : 객체나 배열의 특정값을 손쉽게 추출할 수 있는 표현식

ES6 이전 기존 자바스크립트의 객체 확장 표현식 사용 방법

var x = 0;
var y = 0;
//동일한 이름의 키값을 객체에 넣음
var obj = { x : x, y : y };
var randomKeyString = 'other';
var combined = {};
//연산 결과로 키값을 대입할 때는 키값을 지정할 코드를 추가로 작성
combined[ 'one' + randomKeyString ] = 'some value';
var obj2 = {
    x : x,
    methodA : function() { console.log('method A' ); },
    methodB : function() { return 0; },
};

기존 자바스크립트에서는 객체와 객체의 값을 선언하기 위해 키 이름과 값을 각각 할당했다. obj에 대입한 객체(x, y)에 동일한 이름의 키값을 일일이 넣어줘야 한다. 또한 연산 결과로 키값을 대입할 때는 키값을 지정할 코드를 추가로 작성해야 한다. 또한 객체에 함수를 추가할 때는 변수에 함수를 할당해야 한다. 

ES6의 객체 확장 표현식 사용 방법

var x = 0;
var y = 0;
var obj = { x, y };
var randomKeyString = 'other';
var combined = {
    [ 'one' + randomKeyString ] : 'some value'
};
var obj2 = {
    x,
    methodA() { console.log('method A' ); },
    methodB() { return 0; },
};

기존 자바스크립트에서 동일한 이름의 키값을 객체에 넣으려면 일일이 넣어줘야하지만, ES6에서는 객체의 키값이 동일하다는 전제 (속성명 === 변수명의 전제조건) 하에 하나만 사용할 수 있다. 또한 객체 생성 블록 안에 대괄호( [] )를 사용하여 표현식을 작성하면 계산된 키값을 생성할 수 있다. 즉, 대괄호를 이용해서 계산된 값을 속성이름으로 활용 가능하단 것이다. 또한 function키워드를 생략하여 바로 함수를 선언할 수 있다.