Destructuring Assignment (구조 분해 할당)

구조 분해 할당 구문은 배열이나 개개체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.       * mdn 공식문서

let a, b, rest
[a, b] = [10, 20]

console.log(a)
// result => 10
console.log(b)
// result => 20

위 코드와 같이 배열에 요소를 해체하여 개별 변수에 할당할 수 있다.

let c, d, rest
[c, d, ...rest] = [10, 20, 30, 40, 50];

console.log(rest)
// result => [30, 40, 50]

위 코드는 개별에 변수에 할당하고 나머지 요소를 rest에 할당한 것이다.

 

배열 구조 분해

// 기본 변수 할당
let color = ["red", "yellow", "green"]

let [apple, banana, mellon] = color
console.log(apple)  // result => "red"
console.log(banana) // result => "yellow"
console.log(mellon) // result => "green"

위 코드는 배열에 구조 분해에 가장 기본적인 배열에 원소를 각각 다른 변수에 할당 한 것이다.

// 기본값
let a, b

[a=5, b=7] = [1]
console.log(a)
console.log(b)

위와 같이 변수에 기본값을 할당하고 분해한 값이 undefined 일 때 기존에 할당하였던 기본값을 사용한다.

// 변수 값 교환
let a = 1;
let e = 3;
[a, e] = [e, a]
console.log(a) // result => 3
console.log(e) // result => 1

위 코드는 하나의 구조 분해 표현식만으로 두 변수의 값을 교환하는 것이다.
기존에는 두 변수의 값을 교환하려면 임시 변수를 사용해서 교환 하였는데 구조 분해 할당 구문을 이용하면 코드 길이가 짧아진다.

// 함수가 반환한 배열 분해
function f() {
  return [1, 2];
}

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

우리는 함수를 사용할때 배열을 사용하는 일이 많다. 위 코드는 함수가 반환한 배열을 분해 할당하는 코드 이다.

// 반환 값 무시
function f() {
  return [1, 2, 3];
}

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

위와 코드는 필요하지 않은 요소를 무시한 것이다.

function f() {
  return [1, 2, 3];
}
[,,] = f()

위와 같이 반환값을 모두 무시할 수도 있다.

// 변수에 배열의 나머지 할당
let [a, ...b] = [1, 2, 3];
console.log(a); // result => 1
console.log(b); // result => [2, 3]

위는 값을 분해 할당하고 나머지 구문을 이용해 하나의 변수에 할당한 것이다.
나머지 요소의 오른쪽 뒤에 쉼표가 있으면 에러가 발생한다.

 

객체 구조 분해

// 기본 할당
let o = {p: 42, q: true};
let {p, q} = o;

console.log(p); // result => 42
console.log(q); // reuslt => true

위는 객체 구조 분해 할당에 기본이다.

// 선언 없는 할당
let a, b;

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

위와 같이 구조 분해를 통해 선언과 분리하여 값을 할당할 수 있다.

// 기본값
let {a = 10, b = 5} = {a: 3};

console.log(a); // result => 3
console.log(b); // result => 5

// 기본값 동시 할당
let {a: aa = 10, b: bb = 5} = {a: 3};

console.log(aa); // result => 3
console.log(bb); // result => 5

위는 해체된 값이 udefined인 경우 변수에 기본값을 할당할 수 있고,
새로운 변수명에 할당과 기본값 할당을 한번에 할수 있다.

객체 구조 분해 또한 위에 배열 구조 분해 할당과 마찬가지로 rest를 사용하여 나머지 요소를 분해 할당 할 수도 있다.

 

Rest parameter (나머지 매개변수)

나머지 매개변수 구문을 사용하면 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있습니다.    * mdn 공식문서

나머지 매개변수는 함수의 마지막 매개변수 앞에 ' ... ' 를 붙여 나머지 매개변수로 설정할 수 있다.

function test(a, b, ...rest){ 
  console.log(a, b); // reulst => 1 2
  console.log(rest); // reulst => [3, 4, 5]
}
test(1, 2, 3, 4, 5);

나머지 매개변수는 함수의 매개변수로 쓰여서 뒤에 남는 요소들을 배열로 받아 준다.

any(...one, ...two, ...three) // wrong

any(...one, two, three) // wrong

any(ondem two, three) // not wrong

나머지 매개변수는 함수 정의에는 하나의 ' ... ' 만 존재 가능하고 마지막 매개변수여야 한다.