📒

스프레드 문법은 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만들어줍니다.

스프레드 문법의 결과는 개별적인 값들의 목록이기 때문에 스프레드 문법의 결과를 변수에 할당할 수 없습니다.

const list = ...[1,2,3]; // SyntexError:

스프레드 문법을 사용할 수 있는 대상이 되는 것들은 이터러블에 한정됩니다.

✔️함수 호출문의 인수 목록에서 스프레드 문법 사용하기

const arr = [1,2,3];

const max = Math.max(arr); // -> NaN

자바스크립트의 내장 함수는 보통 인수의 개수에 제약을 두지 않는 경우가 많습니다.

Math.max 메서드 또한 이와 같은 가변 인자 함수입니다.

Math.max(1); // 1
Math.max(1,2); // 2
Math.max(1,2,3); // 3
Math.max(); // Infinity

Math.max메서드의 인수로 배열을 넘길 수 없기 때문에 배열의 각 요소를 펼쳐서 개별적인 값들의 목록으로 만들어주고 이를 인수로 전달해야 합니다.

const arr = [1,2,3];

// apply 함수의 두 번째 인수(배열)은 apply 함수가 호출하는 max함수의 인수 목록입니다.
// 배열이 펼쳐져서 인수로 전달되는 효과가 나게 됩니다.
const max = Math.max.apply(null,arr); // 3

혹은

const arr = [1,2,3];

const max = Math.max(...arr); // 3

스프레드 문법을 사용하면 됩니다. 이 형태가 더 간단하고 가독성이 좋습니다.

📌Rest 파라미터

스프레드 문법이 Rest 파라미터와 형태가 동일하여 헷갈릴 수 있습니다.

Rest 파라미터는 함수에 전달되는 인수들의 목록을 배열로 전달받기 위해 매개변수 앞에 ...을 붙이는 것입니다.

즉 Rest 파라미터는 뭉치는 것, 스프레트 문법은 뭉쳐져 있는 걸 펼치는 것 이렇게 서로 반대 되는 개념입니다.

✔️배열 리터럴 내부에서 스프레드 문법 사용하기

📌concat

const arr1 = [1,2].concat([3,4]);
console.log(arr1); // [1,2,3,4];

const arr2 = [...[1,2], ...[3,4]];
console.log(arr1); // [1,2,3,4];

이렇게 Array.prototype.concat메서드를 사용하지 않고도 두 개의 배열을 하나로 결합할 수 있습니다.

📌splice

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

Array.prototype.splice.apply(arr1, [1,0].concat(arr2));
console.log(arr1); // [1,2,3,4]

let arr1 = [1,4];
let arr2 = [2,3];
console.log(arr1.splice(1,0,...arr2));
console.log(arr1); // [1,2,3,4]

✔️객체 리터럴 내부에서 사용하는 경우

스프레드 문법의 대상은 이터러블이어야 하지만 일반 객체를 대상으로도 스프레드 문법을 사용할 수 있습니다.

const obj = {x: 1, y: 2};
const copy = { ...obj }; // 얕은 복사
console.log(copy) // {x: 1, y: 2}
console.log(obj === copy) // false

const merged = {x:1, y:2, ...{a:3, b:4}};
console.log(merged); // {x:1, y:2, a:3, b:4}