Spread syntax (...)

구글링을 하다보면 자바스크립트 코드에 ... 기호를 볼수 있다.

스프레드 문법이라는 것인데 여러가지로 유용하게 쓰일 것 같아서 정리해본다.

Spread syntax (...)

기본적으로 스프레드 문법은 대상을 각 요소로 분리 시킨다.

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

아래와 같은 용도로 많이 사용된다.

// # 배열 결합
const test1 = [1, 2, 3, 4];
const test2 = [5, 6, 7, 8];
console.log([...test1,...test2]); // [1, 2, 3, 4, 5, 6, 7, 8]

// # 배열 복사
const test3 = [...test1];
console.log(test1); // [1, 2, 3, 4]
console.log(test3); // [1, 2, 3, 4]
console.log(test1 === test3); // false

// # 	객체 결합
const test4 = { a: "test1", b: "test2" };
const test5 = { c: "test3", d: "test4" };
const test6 = { ...test4, ...test5 };
console.log(test6); // { a: "test1", b: "test2" , c: "test3", d: "test4" }

// # 객체 복사
const test7 = { ...test4 };
console.log(test7); // { a: "test1", b: "test2" };
console.log(test7 === test4); // false

// # Arguments 활용
function test8(data) {
  // 파라미터를 갯수에 맞게 작성해야한다.
  return data;
}
function test9(...data) {
  return data;
}
function test10(fixedData, ...data) {
  console.log(fixedData); // fixedData: 1
  return data;
}

console.log(test9(1, 2, 3, 4)) // data: [ 1, 2, 3, 4 ]
console.log(test10(1, 2, 3, 4)) // data: [ 2, 3, 4 ]