구조분해 할당 & rest parameter

⚙︎ 구조분해 할당

: 배열이나 객체의 속성을 해체햐여 그 값을 개별 변수에 담을 수 있게 하는 표현식

let a, b, rest;
[a, b, ...rest] = [10, 20, 30, 40, 50];

// a = 10,  b = 20, rest = [30, 40, 50]

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40})

// a = 10, b = 20, c = {c: 30, d: 40}

위의 코드와 같이 배열, 객체의 값을 해당 변수에 즉석으로 할당할 수 있다.

• 만약 내가 지정한 변수(좌항)의 갯수가 배열, 객체(우항)보다 적다면 초기값을 설정하여 undefined 대신 사용할 수 있다.

let a, b;
[a = 5, b = 7] = [1];

// a = 1, b = 7

• 변수 값 교환

기존에는 변수의 값을 교환하기위해선 임시값을 할당할 변수가 필요했다. 하지만 구조분해할당은 바로 두 값을 교환할 수 있다.

//	기존 
let a = 1, b = 3, c = 0;
c = a;
a = b;
b = c;

// 구조분해 할당
[a, b] = [b, a]

• 함수 리턴 구조분해

function a() {
  return [1, 2, 3]
}

let a, b;
[a, b] = f();
// a = 1, b = 2

[a, , b] = f();
// a = 1, b = 3
[, ,] = f()

, (쉼표)를 이용하면 원치 않는 값을 건너 딀 수 있다.

• 변수에 나머지 값 반환하기

let a, b
[a, ...b] = [1, 2, 3, 4, 5]

// a = 1, b = [2, 3, 4, 5]

객체 구조분해 할당

: 객체 구조분해에서는 선언과 동시에 구조분해를 하지 않을경우 ( .. ) 을 주의하여 사용해야한다.

// case1
let a, b;
({a, b} = {a: 1, b: 2})

// case2
let a, b = {a: 1, b: 2}

위 코드의 1, 2번 케이스는 모두 같은 결과이다. 하지만 case1 에서 소괄호를 제외하게 되면 좌변의 {a, b}를 객체 리터럴이 아닌 블록으로 간주하게 되기에 주의해야 한다.

• 새로운 key 이름으로 할당받기

let o = {a: 1, b: 2};
let {a = c, b = d} = 0;

// c = 1, d = 2

** 중첩 객체, 배열도 구조분해 할당이 가능하다.

• 계산된 속성 이름과 구조 분해

let key = "z";
let { [key]: foo } = { z: "bar" };

// foo = "bar"

• 유요하지 않은 식별자명
  : 식별자로 적합하지 않은 속성명이 제공될 경우에도 구조분해를 이용할 수 있다. 단, 유효한 식별자명을 제공해야한다.

const foo = { 'fizz-buzz' : true};
const {'fizz-buzz' : fizzBuzz} = foo;

// fizzBuzz = true

⚙︎ rest

: rest 속성은 구조 분해 패턴으로 걸러지지 않은 열거형 속성의 키를 가진 나머지 항목들을 모아준다.

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}

// a = 10, b = 20, rest = {c: 30, d: 40}

위의 내용은 MDN의 내용을 모아둔 내용입니다.

[MDN]
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment