Spread 구문

Spread 구문 (Spread Syntax)

- 배열앞에 ...

- 값을 하나로 묶은 배열을 각각의 배열값으로 펼칠 때 사용하는 문법

- 배열을 다룰 때 유용하게 활용

const numbers = [1, 2, 3];

console.log(numbers); // [1, 2, 3]

 

-> spread 구문 사용하기

const numbers = [1, 2, 3];

console.log(...numbers); // 1 2 3
console.log(1, 2, 3); // 1 2 3

 

- push를 할 경우 같이 복사되어 같은 값을 반환

const webPublishing = ['HTML', 'CSS'];
const interactiveWeb = webPuslishing;

interactiveWeb.push('JavaScript');

console.log(webPublishing); // ['HTML', 'CSS', 'JavaScript']
console.log(interactiveWeb); // ['HTML', 'CSS', 'JavaScript']

 

- 각각 반환해야할 경우 slice() 사용

const webPublishing = ['HTML', 'CSS'];
const interactiveWeb = webPuslishing.slice();

interactiveWeb.push('JavaScript');

console.log(webPublishing); // ['HTML', 'CSS']
console.log(interactiveWeb); // ['HTML', 'CSS', 'JavaScript']

 

- 메소드를 활용하지 않고 spread구문으로도 가능

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

interactiveWeb.push('JavaScript');

console.log(webPublishing); // ['HTML', 'CSS']
console.log(interactiveWeb); // ['HTML', 'CSS', 'JavaScript']

 

- spread구문을 활용하면 바로 요소 추가도 가능

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

console.log(webPublishing); // ['HTML', 'CSS', 'JavaScript']
console.log(interative);  // ['HTML', 'CSS', 'JavaScript']

 

- 여러 배열을 합칠 때 각 배열을 spread구문으로 펼쳐서 두 배열이 합쳐진 새로운 배열을 간단히 만들 수 있음

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

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

 

- 함수를 호출할 때 argument로도 활용가능

const introduce = (name, birth, job) => {
  console.log('안녕하세요! 반갑습니다.');
  console.log(`저는 ${name}입니다.`);
  console.log(`${birth}년 생이고,`);
  console.log(`직업은 ${job}입니다.`);
  console.log('잘 부탁드립니다 :)');
}

const myArr = ['코드잇', 2017, '프로그래밍 강사'];
introduce(...myArr);
/*
안녕하세요! 반갑습니다.
저는 코드잇입니다.
2017년 생이고,
직업은 프로그래밍 강사입니다.
잘 부탁드립니다 :)
*/

 

* spread구문 자체를 값으로 오해하면 안됨

- 하나의 값이 아닌 여러 개의 값을 목록

 

- spread구문을 이용하여 배열 펼치기

const members = ['태호', '종훈', '우제'];

const newObject = {...members};

console.log(newObject); // {0: "태호", 1: "종훈", 2: "우제"}

 

실습

주어진 템플릿 속의 코멘트를 참고해서 제시된 문제들을 해결해주세요.

 

const snacks = ['원카칩', '꿀버터칩', '헛스윙칩', '태양칩', '야채시간'];
const drinks = ['사이다', '콜라', '우유', '물', '커피', '레몬에이드'];

function printArguments(...args) {
  for (const arg of args) {
    console.log(arg);
  }
}

// 1. Spread 구문을 활용해서 snacks와 drinks 배열을 각각 mySnacks와 myDrinks 변수에 복사
const mySnacks = [...snacks];
const myDrinks = [...drinks];

mySnacks.splice(2, 3);
myDrinks.splice(1);

// 2. Spread 구문을 활용해서 mySnacks와 myDrinks 순서로 두 배열을 합쳐서 
   // myChoice 변수에 할당해 주세요
const myChoice = [...mySnacks, ...myDrinks];

// 3. Spread 구문을 활용해서 myChoice의 각 요소들을 printArguments 함수의 아규먼트로 전달
printArguments(...myChoice);

 

실습 결과

원카칩
꿀버터칩
사이다