spread와 rest

Spread와 Rest 문법

Spread와 Rest 문법은 둘다 자바스크립트 ES6에서 도입되었다. 비슷하게 생겼지만 실제로는 완전히 다른 문법이다.

스프레드 문법은 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set 등과 같이 순회할 수 있는 이터러블로 한정된다.

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

console.log(...{a:1, b:2}) // 에러

spread 문법의 결과물은 특정한 값이 아니라 값들의 목록이다. 따라서

var result = ...[1,2,3] //Unexpected token '...' 에러

이와같이 변수에 할당하려 하면 에러가 난다. 스프레드 문법은 다음과 같은 쉼표로 구분한 값의 목록으 사용하는 문맥에서만 사용할 수 있다.

var arr = [1, 3, 5]

let max = Math.max(1,3,5)
max = Math.max(...arr); // 5

별도의 메서드를 사용하지 않고 두개의 배열을 1개의 배열로 결합할 수 있다.

const arr = [...[1,2], ...[3,4]]

배열의 중간에 추가할 수도 있다.

const arr1 = [1,4];
const arr2 = [2,3];

arr1.splice(1, 0, ...arr2)

배열을 복사하는데도 사용할 수 있다.

const arr = [1,2,3];
const cpArr = [...arr];

console.log(arr === cpArr); //false

스프레드 프로퍼티라는 것을 사용하면 객체 프로퍼티 목록에서도 스프레드 문법을 사용할 수 있다. 원래는 이터러블이어야 하지만 이 문법은 일반 객체에도 허용된다.

const obj = {a:1, b:2}
const cpObj = {...obj};

console.log(cpObj) //{ a: 1, b: 2 }

const objArr = {...{a:1, b:2}, ...{c:3, d:4}};
console.log(objArr); // { a: 1, b: 2, c: 3, d: 4 }

Rest 파라미터는 나머지 매개변수라고도 하며 매개변수 이름 앞에 점 ...을 붙여서 정의한 매개변수를 의미한다. 이를 통해 함수에 전달된 인수들의 목록을 배열로 전달받는다.

function func1(...rest) {
    console.log(rest); //[1,2,3]
}

func1(1,2,3);

일반적인 매개변수와도 함께 사용할 수 있다.

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

func2(1,2,3)

즉, rest 파라미터에는 먼저 선언된 매개변수에 할당되고 남은 값들로 구성된 배열이라는 것을 알 수 있다. 따라서 rest 파라미터는 반드시 마지막 파라미터여야한다.

spread 문법과 rest 문법은 유사한 형태를 가지고 있지다. 하지만 spread 문법은 iterable 구조를 분해하는데 사용한다면 rest는 나머지 값을 다시 배열로 감싸준다는 차이점이 있다.