본문 바로가기

Frontend/자바스크립트 Java Script

[ES6] 객체 확장 표현식과 구조 분해 할당

var obj = {};             // 객체 선언

var ram = 'other';

obj.a = 1;                 // a라는 키값에  1이라는 값을 선언

obj['a' + ram] = 1;     // 키 값을 연산을 통해 사용하기 위해 [ ]를 사용해 문자값을 연산. 오브젝트에 연산된 키값에 1을 선언

obj[`a${ram}`] =1;    // `백틱을 사용한 위와 동일한 표현

console.log(obj);      -> {a: 1, aother: 1}

 

오브젝트 변수 선언하는 다른 방식

var obj = {

    a: 1,

};

방식으로 선언할 때는 바로 키를 조합해 사용하는 방식이 불가능 했음.

var ram = 'other';

obj[`a${ram}`] = 1; 이렇게 꼭 따로 선언해서 조합해야 했음.

 

그런데 확장표현식에서는 오브젝트 안에서 []표현식 자체를 집어넣어 변수 키값을 지정할 수 있다.

var ram = 'other';

var obj = {

    a: 1,

    ['a' + ram]: 1

};

console.log(obj);  ->{a: 1, aother:1}