구조 분해 할당이란? (7가지의 예제에 대한 코드와 설명 첨부)

edabit에서 스코프 문제를 풀다가

구조분해 할당 개념을 접했습니다.

 

https://devsner.tistory.com/43

[edabit] Fix the Code: Un-Mutating an Array - 문제 해결 과정 및 배운 점(구조분해 할당)

 

아직 잘 모르는 개념이기 때문에 러닝로그로 따로 정리해 봅니다.

 

우선, 구조 분해 할당이란,

 

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

 

'해체'와 '담는다'를 유념하면 개념을 이해하는데 도움이 될 것입니다.

 

1.

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

위는 a와 b, 그리고 나머지로 이루어진 변수 선언입니다.

하지만 rest는 따로 값이 할당되지 않음을 알 수 있습니다.

 

2.

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

위와 비슷한 예제입니다. 이번에는 rest에 값이 할당되어있습니다.

여기서 2가지에 주목해야 합니다.

하나는 rest에 값을 할당하기 위해선, 

'...rest'라는 문법을 사용해야 한다는 것입니다.

둘째는 a, b에 해당하지 않는 나머지 부분이라는 것을 염두에 두는 것입니다.

 

 

3.

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

위는 객체 형태의 구조 분해 할당입니다

해체하고 값을 담고 있는 것을 볼 수 있습니다.

 

4.

({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}

3번의 예제에서 rest가 추가된 것입니다.

 

 

5. 

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

응용입니다. x 변수에 배열을 할당 해 주었습니다.

밑의 줄에서 y와 z가 담긴 배열에 대해서 x의 값을 할당 해 주었습니다.

그러면, 값을 어떻게 해서 y와 z에 담길 지 고민해 봐야 합니다.

x의 값을 해체하여 y와 z에 담는다, 를 생각하면 좋습니다.

x의 인덱스 값, 2부터는 rest의 영역이 되겠지만, 여기서는 선언되지 않았으니 무시되 버립니다.

 

6.

var a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

구조 분해 할당의 기본값에 대한 예제입니다

보시면 a와 b에 =을 통해 특정 값이 미리 할당되 있는 것을 보실 수 있을 겁니다.

2번째 줄의 우항이 없이, 바로 콘솔로그를 찍게 되면 미리 할당된 값들이 나오겠죠.

하지만, 우항에서 보시다시피 1의 값이 담긴 배열이 할당되 있습니다.

순서대로, a의 값만 담기겠죠.

b는 그대로입니다.

 

7. 

var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

7번의 예제가, edabit 문제를 풀때 사용했던 방법입니다.

a에 1이 담기고, b에 나머지가 담긴다, 위에서 쭈욱 보셨다면 금방 이해하실 수 있을 것입니다.

 

 

참고 문헌 :

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

구조 분해 할당