[자바스크립트 js] spread 구문

  spread 구문

• 배열을 다룰 때 유용하게 활용된다.
• 여러개의 값을 하나로 묶은 배열을, 다시 각각의 개별값으로 펼치는 문법.
• 배열 앞에 마침표 3개를 붙여주면 된다.
• 배열이나 객체를 복사하거나 혹은 복사해서 새로운 요소들을 추가할 때 활용.
• 배열은 객체로 펼칠 수 있지만, 객체는 배열로 펼칠 수 없다.

 

 

*** rest 파라미터도 마침표 3개를 사용한다.

- rest 파라미터는 여러개의 아규먼트를 하나의 파라미터로 묶는 방식.

- spread 구문은 하나로 묶여 있는 값을 각각의 개별값으로 펼치는 방식.

 

 

 

1. 배열을 좀 더 편리하게 복사할 수 있다.

[보기1]
const webPublishing = ['HTML', 'CSS'];
const interactiveWeb = webPublishing;

interactiveWeb.push('JavaScript');

console.log(webPublishing);
console.log(interactiveWeb);

//결과
//"HTML", "CSS", "JavaScript"
//"HTML", "CSS", "JavaScript"


[보기2]
const webPublishing = ['HTML', 'CSS'];
const interactiveWeb = webPublishing.slice(); //배열 복사

interactiveWeb.push('JavaScript');

console.log(webPublishing);
console.log(interactiveWeb);

//결과
//"HTML", "CSS"
//"HTML", "CSS", "JavaScript"



[보기3 spread 구문]
const webPublishing = ['HTML', 'CSS'];
const interactiveWeb = [...webPublishing];

interactiveWeb.push('JavaScript');

console.log(webPublishing);
console.log(interactiveWeb);

//결과
//"HTML", "CSS"
//"HTML", "CSS", "JavaScript"


[보기4 spread 구문 쉽게 활용]
const webPublishing = ['HTML', 'CSS'];
const interactiveWeb = [...webPublishing, 'JavaScript'];

console.log(webPublishing);
console.log(interactiveWeb);

//결과
//"HTML", "CSS"
//"HTML", "CSS", "JavaScript"

 

 

2. 여러 배열 합칠 때도 활용

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

const arr3 = arr1.concat(arr2);
console.log(arr3);

//결과
//1, 2, 3, 4, 5, 6


[보기2 spread 구문 활용]
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr3 = [...arr1, ...arr2];
console.log(arr4);

//결과
//1, 2, 3, 4, 5, 6

 

 

3. 함수를 호출할 때 아규먼트로도 활용할 수 있다.

const introduce = (name, birth, job) => {
	console.log('안녕하세요!');
    console.log(`저는 ${name}입니다.`);
    console.log(`${birth}년 생이고,`);
    console.log(`직업은 ${job}입니다.`);
    console.log(`끝까지 해보겠습니다!`);
}

console myArr = ['뚝딱', 2019, '개자이너'];
introduce(...myArr);


//결과
//안녕하세요!
//저는 뚝딱입니다.
//2019년 생이고,
//직업은 개자이너입니다.
//끝까지 해보겠습니다.

스프레드 구문은 하나의 값으로 평가 되는 게 아니라, 여러 값의 목록으로 평가한다.

 

 

 

4. 배열을 펼쳐서 객체에 담으면, 배열의 인덱스가 프로퍼티 네임이 되어서 객체가 만들어진다.

const members = ['뚝딱', '도깨비', '두올다'];

const newObj = {...members};

console.log(newObj);


//결과
//{0: "뚝딱", 1: "도깨비", 2: "두올다"}

 

 

 

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

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"}

 

 

6. spread구문을 활용해서 새로운 배열을 만든다거나, 함수의 아규먼트로 사용할 수 없다.

객체는 배열로 펼칠 수 없다.

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

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

[...latte]; // Error

(function (...args) {
  for (const arg of args) {
    console.log(arg);
  }
})(...cafeMocha); // Error