Javascript 비구조화 할당 ( ... 전개 연산자)

비구조화 할당

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식

 

[...test] = [1, 2, 3, 4, 5];

위와 같은 식이있다고 가정해봅시다.

 

왼쪽은 변수명, 오른쪽은 할당해주는 값입니다.

 

console.log(test)

를 한번 적어봅시다.

 

결과값은 [1, 2, 3, 4, 5] 가 나오게 될것입니다. 당연한거죠?

 

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

이렇게 적어도 같은 결과일겁니다. 자 그럼 좀 더 짤라볼까요?

 

[a, b, ...test] = [1, 2, 3, 4, 5];
console.log(a);
console.log(b);
console.log(test);

자 다음과 같이 적는다면 콘솔에 적히는 결과값은 과연 어떻게 나올까요?

결과는 a = 1, b = 2, test = [3, 4, 5] 이렇게 나오게 됩니다.

 

... 은 전개 연산자를 뜻합니다. 여기서 전개 연산자는 음.. 그저 배열을 편하게 만들기위해 사용하는 하나의 기법 이라고 생각하시면 됩니다.

// var const let 아무거나 사용하셔도 됩니다.
[a, b, ...test] = [1, 2, 3, 4, 5];
const arr = ...test;
console.log(arr);

이렇게 하면 arr의 값은 [3, 4, 5] 입니다.

 

간단하죠?