구조 분해 할당, spread operator(전개 구문), rest operator (나머지 매개변수)

드엔트론프·2022년 9월 30일

rest operator spread operator 구조분해할당

ES6의 요 문법들, 리액트에 들어가게 되면 더 자주 활용하게 되지만 각자 생김새가 비슷하여 헷갈릴 때가 많다.
가볍게 정리해보고 가자.

구조 분해 할당

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

배열과 객체에서의 구조분해 할당이 있다.
MDN의 예시를 보면 이해가 더 빠르다. 예시를 살펴보자.

'배열'의 구조 분해 할당 예제_1

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

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

foo 라는 변수에 one, two ,three 라는 값이 들어 있는 배열을 할당해주었다.
구조분해 할당이 아니라면 red, yellow green은

let red = foo[0]; 
let yellow = foo[1];
let green = foo[2];

console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

이렇게 들어갔어야 된다. 각각의 변수를 일일이 지정하는 일. 깔끔해 보이지만 귀찮은 작업이다.
이를 위처럼 한 줄로 작성하게 해주는 게 바로 구조분해 할당 !
이렇게 다시 보자면 구조분해 할당이라는 이름이 참 잘 지은거 같기도 하다. 구조를 분해해서 할당했구나..;

'배열'의 구조 분해 할당 예제_2

let a, b;

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

구조 분해 할당 시에 변수만 따로 선언 후 할당도 가능하다. 또 예시처럼 기본 디폴트 값을 준 후 [1] 인 배열의 0번째 변수에만 값을 할당해도 된다.

'배열'의 구조 분해 할당 예제_3

let a = 1;
let b = 3;

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

이렇게 서로의 값을 바꾸기도 쉽게 가능하다

'객체'의 구조 분해 할당 예제_1

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

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

객체도 결국 사용하는 모습은 배열의 구조 분해 할당과 비슷하다 다만 대괄호가 아닌 중괄호인 것
객체의 구조 분해 할당이 없었을 땐 어떻게 했을까?

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

let p = o.p;
let q = o.q;

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

역시 구조 분해 할당으로 하는 것이 더 깔끔해 보인다.

'객체'의 구조 분해 할당 예제_2

let o = {p: 42, q: true};
let {p: foo, q: bar} = o;

console.log(foo); // 42
console.log(bar); // true

새로운 변수 이름으로 할당도 가능하다.
p를 foo로 q를 bar로 설정 후 o의 값을 구조 분해 할당하니 원하는 결과가 나온다.

전개 구문, 스프레드 문법 spread operator

하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다.
순회할 수 있는 이터러블은 모두 스프레드 문법을 사용할 수 있는 대상이다.

console.log(...[1,2,3]) //1 2 3
console.log(...'Hello') // H e l l o
console.log(...new Map([['a','1'],['b','2']])) // ['a', '1'] ['b', '2']

스프레드 문법 어떨때 쓸까

배열 내 최댓값을 구할 때

const arr = [1, 2, 3]

Math.max(...arr) //3

배열 2개를 1개로 합칠 때 - concat 대신 사용

ES5 때는 concat 메서드로 배열을 합쳤다.

//ES5
let arr = [ 1, 2 ].concat([ 3, 4 ])
console.log(arr) // [ 1, 2, 3, 4 ]

// ES6
const arr = [...[1, 2], ...[3, 4]]
console.log(arr) // [ 1, 2, 3, 4 ]

이 외에도 진짜 쓰임새가 너----무 많다.
splice 메서드 대신, slice 메서드 대신 등등.. 잘 익혀놓고 필요할 때 알차게 사용하자.

나머지 매개변수, Rest파라미터

Rest 파라미터(Rest Parameter, 나머지 매개변수)는 매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수를 의미한다. Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

function foo(param, ...rest) {
  console.log(param); // 1
  console.log(rest);  // [ 2, 3, 4, 5 ]
}

foo(1, 2, 3, 4, 5);

function bar(param1, param2, ...rest) {
  console.log(param1); // 1
  console.log(param2); // 2
  console.log(rest);   // [ 3, 4, 5 ]
}

bar(1, 2, 3, 4, 5);

예제를 보면 알 수 있듯, 함수의 매개변수에 인수 목록을 배열로 받는 게 특징이다.
rest파라미터는 무조건 맨 뒤에서 써야 한다.

function foo( ...rest, param1, param2) { }

foo(1, 2, 3, 4, 5);
// SyntaxError: Rest parameter must be last formal parameter

이렇게 앞에 쓰면 에러가 발생!

스프레드 문법과 rest파라미터의 차이

스프레드 문법과 rest파라미터 문법의 차이는 이것이다.
스프레드 문법 은 여러 개의 값이 하나로 뭉쳐 있는 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만든다.
rest파라미터는 함수에 전달된 매개변수(인수)들의 목록을 배열로 전달받기 위해 매개변수 앞에 ...을 붙이는 것이다.
따라서 rest파라미터와 스프레드 문법은 서로 반대의 개념이다.

생김새는 거의 동일하나 사용하는 이유는 아예 반대라는점.
간단하지만 기본이 되는 부분을 짚고 간다.