디스트럭처링은 구조화된 배열 혹은 객체를 분해하여 변수에 할당하는 방식이다. 이 개념을 몰랐더라도 React를 사용해봤던 개발자라면 아마 많이 봤을 문법이다.
const { state } = this.props;오른쪽의 특정 값을 해체하여 왼쪽에 할당하는 표현식을 Destructuring Assignment라고 한다.
//ES5
var arr = ['JS', 'Java', 'Node.js'];
var x = arr[0];
var y = arr[1];
var z = arr[2];
console.log(x, y, z); //JS Java Node.js//ES6
const arr = ['JS', 'Java', 'Node.js'];
let [x, y, z] = arr;
console.log(x, y, z); //JS Java Node.jsconst numArr = [1, 2, 3, 4];
let [x, y, ,z] = numArr;
console.log(x, y, z); //1 2 4위의 결과를 보면 알 수 있듯이 배열을 디스트럭처링하면 각각의 변수에 배열의 index를 기준으로 할당된다.
디스트럭처링을 사용했을 때 편한 대표적인 예는 변수의 swap처리를 할 때다.
//ES5(For Swap)
var x = 1;
var y = 2;
var tmp = y;
console.log(x, y); //1 2
y = x;
x = tmp;
console.log(x, y); //2 1//ES6
let x = 1;
let y = 2;
console.log(x, y); //1 2
[x, y] = [y, x];
console.log(x, y); //2 1객체 또한 디스트럭처링이 가능하며 배열과 크게 다르지 않다.
//ES5
var obj = { name : 'BKJang', lang : 'Korean', job : 'Developer' };
var name = obj.name;
var lang = obj.lang;
var job = obj.job;
console.log(name, lang, job); //BKJang Korean Developer//ES6
const obj = { name : 'BKJang', lang : 'Korean', job : 'Developer' };
let { name, lang, job } = obj;
console.log(name, lang, job); //BKJang Korean Developer만약 변수 명을 다르게 하고 싶다면 다음과 같이 처리하면 된다.
var obj = { a: 1, b: 'hello' };
var { a: key, b: value } = obj;
console.log(key, value); // 1, 'hello'중첩 객체의 경우에는 아래와 같이 사용한다.
const developer = {
name: 'BKJang',
stack: {
front : 'HTML / CSS / JS',
back : 'Java / Node.js'
}
};
const { name, stack: { front } } = developer;
console.log(name, front); //BKJang HTML / CSS / JS디스트럭처링을 사용하면 기본 값(Default Value)이나 기본 파라미터(Default Parameter)를 세팅할 수 있고, Speread Operator또한 사용할 수도 있다.
const arr = [1, 2, 3, 4];
let [x, y, ...z] = arr;
console.log(x, y, z); //1 2 [3, 4]const obj = { one : 1, two: 2, three: 3, four: 4 };
let { one, two, ...rest } = obj;
console.log(one, two, rest); //1 2 {three: 3, four: 4}const arr = [1, 2];
let [x, y, z = 3] = arr;
console.log(x, y, z); //1 2 3const obj = { one : 1, two : 2 };
let { one, two, three = 3 } = obj;
console.log(one, two , three); //1 2 3const doSomething = (name, stack = 'FrontEnd') => {
stack = stack === null ? 'FullStack' : stack;
console.log(`${name}은 ${stack}개발자입니다.`);
}
doSomething('BKJang'); //BKJang은 FrontEnd개발자입니다.
doSomething('BKJang', 'BackEnd'); //BKJang은 BackEnd개발자입니다.
doSomething('BKJang', undefined); //BKJang은 FrontEnd개발자입니다.
doSomething('BKJang', null); //BKJang은 FullStack개발자입니다.
//Default Parameter는 함수의 length에 포함되지 않는다.
console.log(doSomething.length); //1자바스크립트에서 함수는 length프로퍼티를 가지는데 인자의 갯수를 나타낸다.Default Parameter는 이 length프로퍼티에 포함되지 않는다.