Destructuring Assignment & Rest parameter(구조분해 할당 & 나머지 매개변수)

Kingmo·2022년 3월 24일

1. Destructuring Assignment(구조분해 할당)

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

이는 코드의 양을 줄이고, 가독성을 향상시킨다는 장점이 있다.

배열

// 구조 분해 할당
const numbers = [0, 1, 2];
const [a, b, c] = numbers;
console.log(a, b, c); // 0 1 2

위 코드와 같이 배열의 인덱스에 대응하는 요소들을 할당하여 줄 수 있다.

const numbers = [0, 1, 2, 3, 4, 5, 6];
const [zero, one, two, ...rest] = numbers;

console.log(zero, one, two); // 0 1 2
console.log(rest); // [3, 4, 5, 6]

... 을 이용해 배열을 나눠서 할당 받을 수 있다.

객체

// 구조 분해 할당 (객체)
const numbers = {
  zero: 0,
  one: 1,
  two: 2,
};
const { one, two, zero } = numbers;
console.log(zero, one, two); // 0 1 2

const { num1, num2, num3 } = numbers;
console.log(num1, num2, num3); // undefined undefined undefined

할당된 객체의 key값으로 다른 객체에 값을 할당할 수 있다.

const numbers = { zero: 0, one: 1, two: 2, three: 3, four: 4, five: 5, six: 6 };
const { zero, one, two, ...rest } = numbers;

console.log(zero, one, two); // 0 1 2
console.log(rest); // { three: 3, four: 4, five: 5, six: 6 }

객체도 배열과 같이 ...으로 나눠서 할당이 가능하다.
이를 나머지 할당이라고 하며 특정요소 이후에서 부터
마지막 요소까지 할당 가능하다.

변수 값 교환하기

let a = 100;
let b = 500;

[a, b] = [b, a];
console.log(a, b); // 500, 100

let a = 100;
let b = 500;
let temp = a;

a = b; // a = 500
b = temp; // b = 100

a에는 b의 값을 할당하고,
임시변수 temp에 a의 값을 할당한 후
b에 임시변수 temp 를 할당한다.

일부 반환값 무시

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

let [one, , three] = returnArray();
let [, ,] = returnArray();
let [num1] = returnArray();
console.log(one, three); // 1 3
console.log(num1); // 1

위에서 부터 순서대로 과정을 보자.
반환 받는 인덱스에 대응 하는 변수를
let [, ,]와 같이 빈 칸으로 두면
반환 값을 무시할 수 있다.

2.Rest parameter(나머지 매개변수)

매개변수(parameter)

function 함수이름(매개변수1, 매개변수2, ...) {
    실행문;
}
 
함수이름(인자1, 인자2, ...);

함수 선언에서 활용하기 위해 사용하는 변수를 매개변수라고 한다.
매개변수는 함수를 호출할 때 매개 역할을 하는 변수이다.

그리고 함수를 호출할 때 사용하는 것을 인자라 한다.

위의 코드의 경우 함수를 실행하면
매개변수에 인자가 들어온다.

나머지 매개변수(Rest parameter

함수의 마지막 매개변수 앞에 ...(세개의 마침표)를 붙이면 앞에서 명시한 매개변수의
모든 후속 매개변수를 자바스크립트 배열에 넣도록 지정한다.
마지막 매개변수만 나머지 매개변수로 설정할 수 있다.

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// 콘솔 출력:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]