[JavaScript] Spread 구문

[Spread 구문]

 

하나로 묶여있는 값을 각각의 개별값으로 펼쳐주는 구문. 

const numbers = [1, 2, 3];

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

---

 

[Spread 구문의 사용]

 

1. 배열 복사

 

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

interactiveWeb.push('JavaScript')

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

 

객체 타입의 값들은 변수에 값이 할당되는 것이 아닌, 주소값이 참조되므로 webPublishing 에도 JavsScript 가 push 됨.

 

 

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

interactiveWeb.push('JavaScript')

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

 

이를 방지하기 위해서 slice 메소드를 사용하여 배열을 복사할 수 있음.

 

 

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

interactiveWeb.push('JavaScript')

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

 

slice 메소드를 사용하지 않아도 Spread 구문으로 배열을 복사할 수 있음.

---

2. 요소 추가

 

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

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

 

또한 Spread 구문을 사용하면 바로 요소를 추가할 수도 있음.

---

3. 배열 합치기

 

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

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

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

 

concat 메소드를 사용하지 않아도, 여러 배열을 합칠 때 두 배열을 Spread 구문으로 펼쳐서 두 배열이 합쳐진 새로운 배열을 만들 수 있음.

 

---

4. 값 매칭

 

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

const arr = ['김철수', 2018, '유치원생'];
introduce(...arr);

// 안녕하세요! 반갑습니다.
// 저는 김철수입니다.
// 저는 2018년 생이고
// 직업은 유치원생입니다.
// 잘 부탁드립니다.

 

여러개의 값이 매칭되는 상황에서 사용할 수 있음.

 

---

const numbers = [1];

const number = ...numbers; // Error

 

그러나 배열의 값이 하나인 경우 Spread 구문을 사용하면 에러 발생함.