[JavaScript-56] 배열 구조분해(destructuring)

파이썬을 배워보신 분들은.. 

unpacking이라고 말씀드리면 바로 아실텐데요!

JS의 배열 구조분해는 파이썬의 리스트 unpacking과 완전 같은 문법입니다.

다만, 언어가 다르니 표기법은 달라요.

 

파이썬을 모르시는 분들을 위해 구조분해에 대해 차근차근 설명드려볼게요!

코드를 먼저 보시죠

const arr = [1, 2, 3 , 4, 5];

//구조분해
const [one, two, three, four, five] = arr;

console.log(one); //1
console.log(two); //2 
console.log(three); //3
console.log(four); //4
console.log(five); //5

자, 두 번째 코드에 집중해주세요!

대괄호 속에 요소들을 적어주면, 순서대로 배열 arr의 요소들이 할당되게 되는 것입니다!

 

즉,

[값을 받아줄 변수들] = 값을 제공해줄 배열

 

의 형태로 적어주면, 

대입 연산자 오른쪽의 배열의 요소들이 하나씩 왼쪽 변수로 들어가게 되는 것이죠!

이걸 구조분해라고 불러요.

 

자, 그럼,

값을 받아올 변수의 개수랑 값을 나눠줄 배열의 원소 개수가 다르면??

const arr = [1, 2, 3, 4, 5];
const[x, y] = arr;

console.log(x); //1
console.log(y); //2

네, 하나씩 왼쪽 변수들에 넣어주고, 남은 것들은 그냥 무시됩니다. 

 

그럼, 나머지 요소들을 한데 모아주려면 어떻게 해야 할까요?

네! rest 파라미터의 원리를 떠올리면 되겠네요!

위의 코드를 수정해볼게요

const arr = [1, 2, 3, 4, 5];
const[x, ...y] = arr;

console.log(x); //1
console.log(y); //[2, 3, 4, 5]

이렇게, [x, ...y] = arr를 하게 되면, 처음 하나는 x로, 나머지는 모두 y로 들어가게 됩니다!