[ES6] 객체 확장 표현(Destructuring) 및 구조 분해 할당

2020.09.01 - [웹 프론트엔드/자바스크립트] - [ES6] 자바스크립트 문법 (var, let, const)

---

객체 확장 표현식

 자바스크립트에서 자주 사용하는 key-value 데이터 형식의 객체를 조금 더 확장하여 표현할 수 있습니다.

기존 자바스크립트 객체 확장 표현식과 ES6의 새로운 표현식

// 기존
var num1 = 10;
var num2 = 20;
var obj = { num1: num1, num2: num2 };	// 동일한 이름의 키와 값

// ES6
var obj = { num1, num2 };		// 키값을 생략하면 위와 같이 의미

// 기존
var plusKey = '2020';
var obj2 = {};
obj2['year' + plusKey] = 'corona';	// 키값에 연산을 넣을 경우

// ES6
var obj2 = {
	['year' + plusKey]: 'corona',	// 선언과 동시에 연산 가능
};

// 기존
var obj3 = {
	num1: num1,
    func1Key: function() { console.log(num2); },
    func2Key: function() { return obj2['year' + plusKey]; },
};

// ES6
var obj3 = {
	num1,	// 동일한 키와 값
    func1Key() { console.log(num2); },		// function 키워드 생략
    func2Key() { return obj2['year' + plusKey]; },
};

 

구조 분해 할당

 말이 굉장히 어렵지만 배열이나 객체 데이터를 선언하거나 대입할 경우 기존보다 유연한 사용이 가능합니다.

기존 자바스크립트 구조 분해 사용과 ES6의 새로운 사용법

// 기존
var arrNum = [10, 20];
var num1 = arrNum[0];
var num2 = arrNum[1];
var num3 = arrNum[2] || 0;	// 두번째 배열값이 없으므로 0 초기화

// ES6
var [
    num1,
    num2,
    num3 = 0,		// 대입 선언 부호(=) 사용하여 초기화
] = arrNum;		    // 각 변수에 배열값 할당

// 기존
var tempNum = num2;
var num2 = num1;
var num1 = tempNum;		// 변수값을 서로 치환(교환)할 경우

// ES6
[num2, num1] = [num1, num2];	// 배열의 인덱스 형식으로 교차 치환

// 기존
var obj = {
    key1: 'value1',
    key2: 'value2',
};
var key1Val = obj.key1;
var key2Val = obj.key2;
var key3Val = obj.key3 || 'value3';			// key3 값이 없으므로 'value3' 초기화
var newKey1 = obj.key1;

console.log( key1Val, key2Val, key3Val, newKey1 );	// value1 value2 value3 value1

// ES6
var {
    key1: newKey1,		// newKey1변수 선언과 함께 대입
    key2,			    // key2를 찾아서 그대로 사용
    key3 = 'value3',	// 대입 선언 부호(=) 사용하여 초기화
} = obj;	            // 각 변수에 객체값 할당

// key1는 변수가 아님 주위!
console.log( newKey1, key2, key3 );	// value1 value2 value3

 

---

2020.09.05 - [웹 프론트엔드/자바스크립트] - [ES6] 전개 연산자(spread operator) 사용법

[ES6] 전개 연산자(spread operator) 사용법