[Array] 비구조화 구문 할당 (기본문법 / 추가문법 / 주의사항)

기본 문법

[a1, a2, ...rest_a] = [1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(a1); // 1
console.log(a2); // 2
console.log(rest_a); // [3, 4, 5, 6, 7, 8, 9]

좌항이 호출될 변수명 집합, 우항이 할당될 값이다.

좌항의 각 요소에는 같은 index가 아니라 value가 할당된다.

또한 전개 연산자( ... )를 사용하여 좌항에서 명시적으로 할당되지 않은 나머지 배열 값들을 사용할 수 있습니다. 

나머지 값들은 배열로 ...rest_a 부분에 할당된다.

객체의 경우도 동일하다. 배열 대신 객체로 rest_a 부분에 할당된다.

 

추가 문법

우항의 key값에 변수명으로 사용 불가능한 문자열이 있을경우 아래와 같은 방식으로 비구조화 할 수 있다.

const key = 'it is key';
const { 'an-apple':an_apple, [key]:it_is_key } = { 'an-apple' : 10, 'it is key' : 20};
console.log(an_apple); // 10
console.log(it_is_key); // 20

 

주의 사항

마지막으로 객체 비구조화에서 주의해야 할 점은 명시적 변수 선언(let, const)이 아닐 경우, 괄호를 사용해서 묶어준다.
그러나, 이 방법은 좋은 방식이 아니므로 사용하지 않는 것이 좋겠다.

({ a, b } = { a : 10, b : 20});
console.log(a); // 10
console.log(b); // 20
{ c, d } = { c : 30, d : 40}; // error