[Javascript] 구조 분해 할당 (Destructuring Assignment)

 

리액트를 학습할 때 생소한 구문으로 난항을 겪은 적이 있습니다. 
해당 구문이 구조분해할당 이라는 이름조차도 어려워 보이는 녀석이었습니다. 
간략하게 구조분해할당에 대해 기술하고자 합니다. 

 

배열에서의 구조분해할당(Destructuring Assignment)

let arr = [10, 20, 30, 40, 50]
let a, b, c;
a = arr[0];
b = arr[1];
c = arr[3]

console.log(a);		// 10
console.log(b);		// 20
console.log(c);		// 40

 

[10, 20, 30, 40, 50] 배열이 있습니다.
첫번째값을 a 변수에 할당하고
두 번째 값을 b 변수에 할당하여 
세 번째는 건너뛰고, 네 번째 값을 c변수에 할당하여
a, b,c 를 출력하였습니다. 

 

위의 같은기능을 구조분해할당 방법으로 변경해봅시다. 

let arr = [10, 20, 30, 40, 50]
let [a, b, , c] = arr;

console.log(a);		// 10
console.log(b);		// 20
console.log(c);		// 40

key ->	0번째 배열	1번째 배열	2번째 배열	3번째 배열	4번째 배열
값 ->	10	20	30	40	50
할당 ->	a 변수	b변수		c 변수

[a, b, , c] 형태를 보시면 자리에에 맞게 값이 설정된 것을 확인할 수 있습니다. 
해당 값을 건너띄게 하려면 , ,와 같이 콤마로 띄어 넘기시면 됩니다.

즉, 구조 분해 할당이란?
구조(배열, 객체)를 분해하여
[a, b, , c]와 같은 형태로 할당할 수 있다고 해석하시면 됩니다.
배열에서는 분해라는 말이 크게 와닿지 않지만, 객체를 사용하면 분해라는 말이 좀 더 명확해집니다.

 

객체에서의 구조분해할당 (Destructuring Assignment)

const obj = {a:10, b:20, c:30, d:40, e:50};
let a = obj.a;
let c = obj.c;

console.log(a);	// 10
console.log(c);	// 30

위의 객체를 구조분해할당으로 재 정의해보겠습니다. 

const obj = {a:10, b:20, c:30, d:40, e:50};
let {a, c, ...rest} = obj;

console.log(a);		// 10
console.log(c);		// 20
console.log(rest);	// {b: 20, d: 40, e: 50}

{a:10, b:20, c:30, d:40, e:50}의 객체(구조) 분해하여  {a, c, ...rest} 변수에 할당하였습니다.
우선 처음보는 ...rest는 나중에 살펴보도록 하겠습니다.

key ->	a	b	c	d	e
data ->	10	20	30	40	50
할당 ->	a	rest	c	rest	rest

객체의 key 이름과 동일한 것을 찾아 변수에 할당된 것을 확인할 수 있습니다.
일일이 obj.a와 같은 형태를 길게 작성할 필요 없는 것이죠.
더 대단한 것은 ... 문법입니다.
a, c를 할당했으면 남은 것은 b, d, e 입니다. ...rest는 rest변수에 할당하지 않은 b,d,e를 할당하라는 의미입니다.
이를 Rest elements라고 부릅니다.

 

객체의 key이름과 동일한 변수가 아닌 내가 직접 변수명을 바꾸고자 한다면 어떻게 해야 할까요?

let {a:newA, c, f:newF=60, ...rest} = {a:10, b:20, c:30, d:40, e:50};

console.log(a);		// Uncaught ReferenceError: a is not defined
console.log(newA);	// 10  
console.log(c);		// 30
console.log(newF);	// 60
console.log(rest);	// {b:20, d:40, e:50}

a:newA와 같이 작성하여 객체 key 중 a와 동일한 것은 newA 변수로 할당한다라고 작성할 수 있습니다.
당연히 a를 출력하면 변수로 할당하지 않았기 때문에 에러를 발생합니다.

특이한 f:newF=60를 살펴보도록 하겠습니다.
객체에 없는 값도 이와 같이 할당할 수 있습니다. 만약에 f값이 없다면 60을 기본값으로 설정하라라고 해석하시면 됩니다.  당연히 a:newA=20과 같이 객체 있는 값도 기본값을 설정할 수 있습니다.

 

구조분해할당은 자바스크립트 문법에서 아주 많이 사용됩니다. 
위의 예시는 개념을 잡기 위해 간략하게 작성하였지만, 함수의 인자에 값을 넘길 때도 흔하게 사용되며,
중첩된 객체에서도 활용도 높이 사용됩니다. 
이를 이용하여 많은 트릭도 존재하고요. 
아래의 참고자료에 더 많은 예시가 나와있으니, 참고하시면 좋을 듯합니다.

서두에서 말한 것과 같이 리액트 공부할 때 구조분해할당 문법이 많이 나왔고, 이를 해석하지 못해서 처음에 힘든 경험을 하였기에, 정리 차원에서 문서로 기록해보았습니다.

 

 

---

참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
https://ko.javascript.info/destructuring-assignment