[Javascript] 구조 분해 할당과 전개 구문

서버 유지보수도 하게 될 것 같아 Nest.js 공부하다 갑자기 오랜만에 만나버린 구조 분해 할당.
MDN 오랜만에 읽어봤는데 생각보다 용법이 굉장히 많았다. 면접이나 코딩 테스트 나오면 진짜 당황할듯...ㅋㅋㅋㅋㅋㅋ
이 곳에 적힌 것은 자료형 별 기본적인! 분해 할당이고, MDN에서 추가적인 용법들을 살펴보는 것이 좋다.

구조 분해 할당이란

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 변수에 담을 수 있게 하는 Javascript 표현식이다.

구문

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20


// Stage 4(finished) proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

배열 구조 분해

var foo = ["one", "two", "three"];

var [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

객체 구조 분해

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

 

전개 구문(스프레드 연산자)

전개 구문이 뭐지? 싶지만 spread operator를 말한다.

 

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수(함수로 호출할 경우) 또는 요소(배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있다.

 

말이 어려우니 예문으로 확인해보자.

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6

console.log(sum.apply(null, numbers));
// expected output: 6

예문을 보면 iterable한 객체를 풀어서 써주는, 말 그대로 전개해주는 역할을 하는 연산자라고 할 수 있다.

 

구조 분해 할당 - JavaScript | MDN

전개 구문 - JavaScript | MDN