02-6 객체 확장 표현식과 구조 분해 할당

객체 확장 표현식

 

객체의 변수를 선언할 때 key값을 생략하면 자동으로 key값이 변수명으로 지정된다.

 

var x = 0;
var y = 0;

var obj = { x, y };  // var obj = { x:x, y:y }; 와 같음

var randomKeyString = 'other';
var combined = {
	['one' + randomKeyString]: 'some value',
};

 

 

객체 안에 함수를 넣을 때 function 키워드를 생략할 수 있다.

 

// 객체 안에 함수 넣기
var obj2 = {
    x,
    methodA() { console.log('method A'); },
    methodB() { return 0; },
};

 

 

화살표 함수를 이용할 수도 있다.

 

// 객체 안에 함수 넣기: 화살표 함수 사용
var obj2 = {
    x,
    methodA: () => { console.log('method A'); },
    methodB: () => 0,
};

 

 

 

 

---

 

구조 분해 할당

 

추출하고자 하는 값의 인덱스 위치에 변수를 배치한다.

객체나 배열의 특정값을 쉽게 추출해낼 수 있다.

 

var list = [0, 1];
var [
    item1,
    item2,
    item3 = -1,  // '='로 기본값 할당
] = list;

[item2, item1] = [item1, item2];  // 간편하게 swap

 

var obj = {
    key1: 'one',
    key2: 'two',
};
var {
    key1: newKey1,
    key2,
    key3 = 'default key3 value',  // '='로 기본값 할당
} = obj;

 

이는 앞서 배웠던 전개 연산자와 함께 사용할 수도 있다.

 

var [item1, ...otherItems] = [0, 1, 2];
var { key1, ...others } = { key1: 'one', key2: 'two' };

 

 

 

이후에 공부할 리액트의 useState hook에서 구조분해 할당을 자주 사용한다.

 

useState() 함수가 배열을 리턴한다.