[JS] 구조분해 할당 destructuring

오늘은 전에는 이해를 못했던(😅) 구조분해 할당에 대해 정리를 해 보자.

구조분해 할당이란?

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.
[출처]
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

MDN 문서에서 찾아본 구조분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 한다~ 라고 적혀 있다.

💡 배열의 경우

let [value1, value2] = [1, "new"]
// value1 -> 1 / value2 -> "new" 각각 할당함

우선 독특하게도 Jabascript에서는 let에도 배열 형태로 변수 선언이 가능하다고 한다.🤩

배열 내 순서대로 1:1 매칭이 되며 value1을 콘솔로 출력해보면 1이 나오는것을 확인 할 수 있다.

자 여기서 만약

let arr = ["value1", "value2", "value3"];
let [a, b, c, d] = arr

arr에는 총 3개의 요소들이 들어 있고 밑에 배열 형태로 선언된 변수 자리에는 4개의 요소들이 있다.

서로 요소들의 수가 맞지 않는데 이럴때 console.log(d)를 하면 무엇이 출력될까?

정답은 undefined 이다.
배열의 빈 칸(없는 값)에는 undefined로 들어온다고 한다.

하지만 저 빈 자리에도 언제든지 값을 넣고 싶을텐데 이럴때는 d에 임시로 '초기값' 이란 것을 셋팅해 줄 수 있다!

let [a, b, c, d=4] = arr

위와 같이 d에 4라는 number를 초기값으로 셋팅해 줄 수 있다.
그러면 console.log(d)를 찍으면 더 이상 undefined가 아닌 4로 출력된다.

만약 뒤늦게 arr에 value4라는 4번째 요소를 추가 한다면

let arr = ["value1", "value2", "value3", "value4"]; // value4를 추가
let [a, b, c, d] = arr

이때부터는 더 이상 초기값을 보여주지 않고 value4로 출력된다.
말 그대로 임시적인 값이기 때문!

💡 객체의 경우

let obj = {
    name: 'abc',
    age: 30
}

let {name, age} = obj;

객체도 배열과 다름이 없다! 똑같이 변수명 자리에 {}를 사용하여 할당이 가능하다. 다만 객체는 key가 중요하기 때문에 key로만 사용한다.

새로운 이름으로도 할당이 가능한데,

let {name: newName, age: newAge} = obj;
console.log(newName); // 여기서는 newName 으로 찍어줘야함!!

이런식으로 newName과 newAge로 재 할당을 해 주었다.
이렇게 되면 값을 가져오거나 console.log를 사용하려면 재 할당된 이름(키)으로 가져 와야 한다.

객체도 배열과 동일하게 빈 부분이 생긴다면...?

let {name, age, birthday} = obj;
console.log(birthday); // undefined

마찬가지로 undefined 를 보여준다.

객체에서도 초기값을 셋팅할 수 있는데 birthday에 초기값을 today로 추가한다고 해 보자.

let {name, age, birthday="today"} = obj

이런식으로 추가가 가능하다!
그러면 birthday를 찾을때 undefined 대신 today라고 출력된다.

이처럼 구조분해 할당은 배열과 객체 안에서 독특한 묘기를 보여주는데 어디에 사용될까 생각을 곰곰히 해보니 폼(form)에서 사용자한테 받은 입력 값 중 필수 항목이 아닌 선택 항목의 값을 저렇게 임시로 둘 때 사용해도 괜찮겠다라는 생각이 들었다.

나중에 개인 정보 변경때 사용자가 값을 추가하면 참조 값에서 사용자가 입력했던 값을 보여주면 되지 않을까?! 😅