[50일차] Destructuring Assignment

서론

이틀전 var, const, let에 대해 공부했을때 mdn문서에서 스쳐지나가듯이 Destructuring Assignment이란 용어를 보았다. 그 때 글에는 적지 않았지만 해당 표기법에 대해 호기심이 생겨서 알아보았고, 오늘 글 주제로 선정하게 되어 알게 된 것들을 정리해 보고자 한다.

본론

Destructuring Assignment이란?

Destructuring Assignment(구조분할 할당)은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 자바스크립트의 표현식이다.

let arr = [1, 2, 3] 을 arr1, arr2, arr3에 각 인덱스의 값을 저장하려면 어떤식으로 코드를 구현할 것인가?

let arr = [1, 2, 3];

let arr1 = arr[0];
let arr2 = arr[2];
let arr3 = arr[3];

기본적으로 다들 이 방법을 떠올릴 것이다 변수를 하나 하나 선언해서 값을 0부터 차례로 넣는 것이다. 아니면 루프를 이용해서 배열의 값을 변수에 할당하기도 할 것이다. Destructuring Assignment를 사용하면 위의 과정을 이런 식으로 표현할 수 있다.

let arr = [1, 2, 3];
let [arr1, arr2, arr3] = arr;

훨씬 더 깔끔하고 간단하게 표현이 되었다!
대응하는 인덱스의 값들이 앞에서 순서대로 세팅되기 때문에 배열에서의 Destructuring Assignment에서는 순서가 매우 중요하다. 아래는 Destructuring Assignment 표현식을 다양하게 이용한 예시를 나열해 보았다.

let arr = [1, 2, 3];

//중간에 skip하고 싶은 속성이 있을 때
let [arr1, , arr3] = arr;

//해당하는 값이 존재하지 않는다면?
let [arr1, arr2, arr3, arr4] = arr;
//arr4 는 undefined를 반환한다.
let [arr1, arr2, arr3, arr4 = 6] = arr;
//다음과 같이 기본값을 세팅해서 undefined를 반환하는 것을 방지할 수 있다.

//한 개 이상을 저장하고 싶을때
let [arr1, ...restOne] = arr;

console.log(restOne) // [2, 3]

//문자열
let tmpString = 'hello-world';
let [h, w] = tmpString.split("-");

console.log(h); //hello
console.log(w); //world

객체에서의 Destructuring Assignment

다음과 같은 Destructuring Assignment은 배열에만 적용할 수 있는것이 아니라 객체에도 적용이 가능하다.
객체에서는 같은 key값을 사용하는데, 배열은 순서가 중요하지만 여기에서는 순서가 중요하지 않다.

let testObject = {
	obj1 : 1,
    obj2 : 2,
    obj3 : 3
}

//기본
let obj1 = testObject.obj1;
let obj2 = testObject.obj2;
let obj3 = testObject.obj3;

//Destructuring Assignment
let { obj1, obj2, obj3 } = testObject; 

만약 기존의 key값이 아닌 다른 이름을 사용하고 싶다면 다음과 같이 활용할 수 있다.

let { obj1 : testObj1, obj2, obj3 } = testObject;

nested Object에서도 다음과 같은 표현식을 사용할 수 있다. 예시를 봐주길 바란다.

let testObject = {
	obj1 : {
    	testObj : 'test'
    },
    obj2 : 2,
    obj3 : 3
}

let {obj1 : {testObj}} = testObject;

console.log(testObj);	//'test'

이런식으로 Destructuring Assignment는 다양하게 활용해서 훨씬 더 깔끔하고 가독성이 좋은 코드를 구현할 수 있다!

참고

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
https://youtu.be/lV7ulA7R5Nk
https://youtu.be/UgEaJBz3bjY