[JS] Destructuring Assignment (구조분해할당) + Computed Property Name (계산된 속성 이름)

JS 에서 변수를 한번에 담기 위해 사용하는 구조는

'배열 (Array)' 과 '객체 (Object)' 구조로 크게 두 가지로 나누어진다.

 

데이터를 다루는 데 있어서

이 배열에 담긴 데이터들과 객체의 담긴 데이터들을 분리해서 구별해 저장할 필요가 생길 때

사용하는 기능이 바로

'구조분해할당' 구문이다.

 

let a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

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

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20


// Stage 4(finished) proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN

 

특별히, 구조 분해 할당을 '객체' 구조에 반복문과 함께 사용할 때,
계산된 속성 이름(computed property name)

을 사용하여야 하는 경우가 있었다.

 

32줄, key 값을 중괄호 [ ] 로 감싸야 key 값을 인식했다.

위의 구문 32번째 줄에서
key의 값을 처음에 중괄호 없이 사용하였을 때, 38번째 줄같은 결과가 나오지 않고

 

[ { key: 234 }, { key: 759 }, { key: 677 }, { key: 46} ]

 

위와 같은 결과가 나왔다.

 

ES6 에서 추가된 문법으로

key 값에 Template Literals, 함수값, 계산식 등을 사용할 수 있게 하는 경우가 위의 상황에 적용된 것이었다.

 

https://yorr.tistory.com/13

[ES6] computed property name

 

구조 분해 할당 - 객체의 구조를 반복문 등을 사용하여 계산하여 분해/할당 시에

계산된 속성 이름 구문을 사용해야 생각지도 않은 곳에서의 버그를 잡을 수 있다!