Spread 구문

펼치다 라는 spread의 의미처럼, 여러개의 값을 하나로 묶은 배열을 다시 각각의 개별값으로 펼치는 문법이다.

//spread 구문(spread syntax)
const number = [1, 2, 3];
console.log(number); // (3) [1, 2, 3]  배열이 출력된다.
console.log(...number); //1, 2, 3

//rest parameter
const sumAll = (...args) => {
  let sum = 0;
  for (arg of args) {
    sum += arg;
  }
  return sum;
};

console.log(sumAll(1, 2, 3, 4)); //10

출력되는 창

배열로 묶어있던 값들이 괄호가 벗겨지고 각각의 개별값으로 펼쳐졌다. 그런데 잘 생각해보면 Rest parameter를 만들때도 '...'을 사용했다. 얼핏 비슷한것 같지만 Rest parameter는 여러 개의 아규먼트를 하나의 파라미터로 묶는방식이고, Spread 구문은 하나로 묶여 있는 값을 각각의 개별 값으로 펼치는 방식이다. 그래서 하나의 값으로 평가되는게 아니라 여러 값의 목록으로 평가된다.

const webPublishing = ['HTML', 'CSS'];
const interactiveWeb = [...webPublishing, 'JavaScript'];

console.log(webPublishing); //(2) ['HTML', 'CSS']
console.log(interactiveWeb); //(3) ['HTML', 'CSS', 'JavaScript']
//spread 구문을 활용하면 조금 더 간단하고 직관적이게 배열을 다룰 수 있다.

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

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

const latte = {
  esspresso: '30ml',
  milk: '150ml'
};

const cafeMocha = {
  ...latte,
  chocolate: '20ml',
}

console.log(latte); // {esspresso: "30ml", milk: "150ml"}
console.log(cafeMocha); // {esspresso: "30ml", milk: "150ml", chocolate: "20ml"}


//여러개의 파라미터가 있는 함수를 호출할 때 배열을 펼쳐서 각각의 아규먼트로 사용할 수 있다.
const introduce - (name, birth, job) => {
  console.log(`안녕하세요! 반갑습니다!`);
  console.log(`저는 ${name}입니다.`);
  console.log(`${birth}년 생이고,`);
  console.log(`직업은 ${job}입니다.`);
};

const myArr = ['지니', 1992, '고등학교 교사'];
introduce(...myArr); //함수를 호출할 때 아규먼트로 활용도 가능
//spread 구문 자체를 값으로 오해하면 안된다! 여러개의 값이 각각 매칭되는 상황이기에 가능

Spread 구문은 배열이나 객체를 복사하거나 혹은 복사해서 새로운 요소들을 추가할 때 유용하게 활용할 수 있다. 참고로 배열은 객체로 펼칠 수 있지만 객체는 배열로 펼칠 수 없다.

//하나의 값을 가진 배열을 펼쳤다고 하더라도 괄호가 벗겨지고 하나의 값으로 평가되는게 아니라 오류가 발생한다.
const numbers =  [1];
const number = ...number; // TypeError!

//배열을 펼쳐서 객체에 담으면 
const members = ['태호', '종훈', '우재'];
const newObject = { ...members };

console.log(newObject); // {0: "태호", 1: "종훈", 2: "우재"}
//0번부터 시작하는 배열의 인덱스가 프로퍼티 네임이 되서 객체가 만들어진다.

//객체는 배열로 펼칠 수 없다.
const topic = {
  name: '모던 자바스크립트',
  language: 'JavaScript', 
}
const newArray = [...topic]; // TypeError!

객체를 spread할 때는 반드시 객체를 표현하는 중괄호 안에서 활용해야 한다.