[자바스크립트]JS다운 코드 스타일 #4. 비구조화 할당

<목차>

1. 템플릿 리터럴(Template Literal)
2020/10/07 - [개발/자바스크립트] - [자바스크립트] JS다운 코드 스타일 #1. 템플릿 리터럴

2. spread 연산자
2020/10/08 - [개발/자바스크립트] - [자바스크립트] JS다운 코드 스타일 #2. Spread 연산자

3. 배열, 함수형 프로그래밍
2020/10/15 - [개발/자바스크립트] - [자바스크립트]JS다운 코드 스타일 #3. 배열, 함수형 프로그래밍

4. 비구조화 할당

---

4. 비구조화 할당

비구조화 할당은 '구조 분해 할당 구문'이라고도 합니다. 

간단히 설명하자면 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 javaScript 표현식입니다.

기본적인 예시를 보면서 설명을 이어나가겠습니다.

//배열 예시
let x = [1, 2, 3, 4, 5];
let [y, z] = x;
console.log(y); // 1
console.log(z); // 2

//객체 예시
let o = {p: 42, q: true};
let {p, q} = o;
console.log(p); // 42
console.log(q); // true

보시다시피 우변의 배열 [1,2,3,4,5]의 1,2를 간단하게 [y,z]로 가져오는 것이 보입니다. 이게 바로 비구조화 할당의 기본 예시입니다.

비구조화 할당이 없을때에는 아래와 같이 배열의 요소에 직접 접근하여 할당해주는 방식을 사용했었습니다. 지금 보면 아주 불편해보입니다.

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

---

기본적인 사용법 외에도 다른 방법들을 더 살펴보겠습니다.

1. 기본값 할당 예시

//배열 할당
let a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

//객체 할당
let {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5

변수에 기본값을 할당하면, 분해한 값이 undefined일 때 그 값을 대신 사용합니다.

 

2. 변수값 교환하기

기존에 비구조화 할당이 없었을때에는 두 값을 교환하려면 임시 변수가 필요했습니다. 하지만 이젠 필요없어졌습니다.

let a = 1;
let b = 3;

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

보시다시피 기존의 temp 또는 swap 같은 임시변수 없이 훨씬 직관적으로 교환을 할 수 있게 되었습니다.

3. 배열을 변수 두개로 나누기

이건 약간의 꼼수같은 느낌인데 한번 봐두면 언젠가 쓸날이 있을것같아서 설명드리겠습니다.

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

보시면 a,b로 배열이 나눠졌습니다. splice를 쓰지 않더라고 간단히 나눌수 있는 방법입니다. 다만 2,3개 이런씩으로는 안되니 참고바랍니다.

또한 [a, ...b,] 처럼 spread 연산자 뒤에 쉼표가 있게되면 systaxError 가 발생하니 이점도 유의바랍니다.

이처럼 비구조화 할당을 이용하게 되면 기존의 코드를 좀더 간결하고 직관적으로 바꿀 수 있습니다. 

더 많은 정보를 원하신다면 MDN으로 가서 다시 한번 정독해보시길 추천드립니다.

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

구조 분해 할당

이것으로 JS다운 코드 스타일 시리즈를 마무리하겠습니다. 감사합니다