<React 파헤치기-06> ES6주요문법 - 4. 객체확장표현과 구조분해할당

객체확장표현

JS문법에서 사용되는 key-value 데이터 형식의 객체를 확장하여 표현할 수 있다.

// <1>
const a = 0;
const b = 0;
let number = { a, b };

// <2>
let favoriteString = 'favorite';
let myColors = {
	['my'+favoriteString] : 'ivory',
};

// <3>
let count = {
	add(x,y) {console.log(x+y);},
	mul(x,y) {console.log(x*y);},
};

1 - 객체의 변수를 선언 할 때 key 값을 생략하면 자동으로 키의 이름으로 키값을 지정해준다.

     ex) number = { a : a, b : b }

2 - 객체 생성 시 블록 내에 대괄호 [] 를 사용하여 계산된 key 값을 사용할 수 있다.

3 - function 키워드없이 객체 내 함수를 선언할 수 있다.

 

 

구조분해할당

배열, 객체의 선언 및 할당에 유용하다.

//<1>
const list = [ 10, 20 ];
let [
    a,
    b,
    c=0,
] = list;

// <2>
[a, b] = [b, a]

// <3>
let [ zero, ...others] = [ 0, 10, 100, 1000 ];
let { first, ...otherKeys } = { first:'black', second:'white', third:'yellow' };

// zero = 0, others = [10,100,1000];
// first = {first:'black'} otherKeys = {second:'white', third:'yellow'}

1 - 객체에서 추출하고자 하는 값의 인덱스 위치에 a, b 와 같이 변수 이름을 지정할 수 있고, c와 같이 기본값을 할당할 수도 있다.

2 - swap을 편하게 구현할 수 있다.

3 - 구조분해할당은 전개 연산자와 같이 잘 사용되며 JSON 데이터 변환에 유용하다.