[JavaScript] 구조 분해 할당 (Destructuring)

구조 분해 할당 (Destructuring)

 

ES6 문법에서 가장 많이 사용하게 되는 구조 분해 할당에 대해 알아보자. 

구조 분해 할당은 다시 말해 해체할당이라고도 하는데 한국말이 꽤나 어려운 듯하다. 디스트럭쳐링이 더 편한 듯 하다.
배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이라고 한다. 
텍스트로 보면 어려우니 코드를 통해 확인해보자.

 

예시

let a, b, c;
[a, b] = [10, 20];

console.log(a);  // 10
console.log(b);  // 20

 

펼침연산자를 사용해보면,

let a, b, c;
[a, b] = [10, 20];

console.log(a);  // 10
console.log(b);  // 20

[a, b, ...c] = [10, 20, 30, 40, 50];

console.log(a);  // 10
console.log(b);  // 20
console.log(c);  // [30, 40, 50]

c 변수에는 위와같이 출력되는 것을 확인할 수 있다.

 

 

아래처럼 필요하지 않은 값을 무시할 수 있다.

let arr = [1, 2, 3, 4, 5];
let [a, , c] = arr;

console.log(a);  // 1
console.log(c);  // 3

쉼표 연산자(,) 를 사용하면 편리하다. 

 

 

출처 

JavaScript MDN 문서