글 작성 배경: 동기들이랑 알고리즘 문제 풀이를 하다가 구조 분해 할당을 이용한 풀이를 보게 되었다. 이전 과제에서도 구조 분해 할당을 많이 봤었는데, 그때도 잘 이해가 안 돼도 그냥 무작정 사용했다...
이번 포스트의 주제는 구조 분해 할당 뽀개기!
사실 구조 분해 할당이라는 단어도 어렵다.
검색하기 위해 이름을 떠올리는 것도 어렵다. 😡
차라리 영어로 된 array destructuring이라는 말이 그나마 더 쉬운 것 같다.
구조 분해 할당은 사용 안 해도 되는데, 그냥 우리에게 더 간편하게 보이게 하기 위해 존재한다.
1. 구조 분해 할당 없이 코드 작성
let shirt = 1;
let trousers = 2;
let jogger = 3;벌써 세 줄이나 사용을 했다.
지금이야 세 줄 밖에 안 되지만, 선언해야 할 것들이 무수히 늘어나면 정신 없을 것이다.
2. 구조 분해 할당으로 코드 작성
let shirt, trousers, jogger, cap, socks;
[shirt, trousers, jogger] = [1, 2, 3, 4, 5];
console.log(trousers); // 2 5줄이 되었을 코드가 2줄로 간단해졌다.
내친 김에 spread operator까지 활용해보자
let shirt, trousers, rest;
[shirt, trousers, ...rest] = [1, 2, 3, 4, 5];
console.log(rest); // 3, 4, 5★ [shirt, ...rest, trousers] = [1, 2, 3, 4, 5] 이렇게 작성하면 안 된다. spread operator는 항상 맨 마지막에 있어야 한다.
3. 배열 구조 분해
const wardrobe = ["red", "yellow", "blue"];
const [shirt, trousers, jogger] = wardrobe;
console.log(shirt) // "red"첫번째 줄에서 wardrobe를 배열로 선언하는 것이기 때문에 string으로 값을 담아야 한다. 따옴표 없이 담으면 당연히 에러가 난다.
두번째 줄에서 배열안에 따옴표 없이 값을 담을 수 있는 이유는, 배열에 값을 선언하는 것이 아니라 property를 선언해주는 것이기 때문이다. wardrobe.shirt, wardrobe.trousers 이런식으로..
wardrobe의 첫째 값은 "red", 따라서 shirt는 "red"
앞으로 구조 분해 할당에 익숙해져서 코드를 간결하게 작성하도록 하자!
