모던 자바스크립트 -Spread구문-

Spread 구문

'펼치다'라는 의미처럼 하나로 묶여 있는 값을 각각의 개별 값으로 펼치는 문법 (특히 배열을 다룰 때 유용)

const number = [1,2,3];

console.log(number);
console.log(...number); // 배열앞에 ...붙이는게 문법

Rest Parameter를 만들 때도 ...을 사용하지만 동작하는 방식은 다르다.

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

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

 

Spread 구문으로 배열 복사하기

상기) 객체 타입의 값들은 변수에 주소값이 참조됨.

interactiveWeb에 javaScript를 push 했지만 webPublishing에도 추가된 모습

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

interactiveWeb.push('javaScript'); 

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

이런 경우 slice 메서드를 활용해서 배열을 복사해야 한다.

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

interactiveWeb.push('javaScript');

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

이 때 spread구문을 사용하면 메서드 사용 없이 배열을 복사할 수 있고, 바로 요소를 추가할 수 있다.

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

interactiveWeb.push('javaScript');

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

배열 합치기 가능

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

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

//concat메서드 사용
const arr4 = arr1.concat(arr2);
console.log(arr4);

배열을 펼쳐서 객체에 담기

const members = ['상훈','수민'];
const newObject = {...members}; //중괄호로 감싸서 객체로 만듦
console.log(newObject);

배열의 인덱스가 프로퍼티 네임이 되어 객체가 만들어진 모습

여러 개의 파라미터가 있는 함수를 호출할 때  배열을 펼쳐서 각각의 아큐먼트로 활용 가능

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

const myArry = ['수민',2023,'미래의 웹개발자'];
introduce(...myArry);

 

주의할 점

Spread구문 자체를 값으로 오해하면 안 된다.

아규먼트로 Spread구문을 활용한 예시는 여러 개의 값이 각각 매칭되는 상황이었기 때문에 가능했던 것이다.

Spread구문은 하나의 값으로 평가되는 게 아니라 여러 값의 목록으로 평가된다. 따라서 다음과 같은 상황은 오류가 발생한다.

 

객체 Spread하기

ES2015에서 Spread구문이 처음 등장했을 땐 배열에서만 사용 가능, ES2018에서 일반 객체에도 Spread구문을 사용할 수 있는 표준 등장 즉, 객체를 복사하거나, 기존의 객체를 가지고 새로운 객체를 만들 때 활용 가능

 

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

        2) 객체로는 새로운 배열을 만들거나 함수의 아규먼트로 사용 불가

        2_이유) 객체는 (프로퍼티: 값) 쌍으로 되어 있는 요소들로 구성

 

객체 복사

const codeit = { 
  name: 'codeit', 
};
//중괄호 안에서 객체를 spread 하게되면, 
//해당 객체의 프로퍼티들이 펼쳐짐
const codeitClone = { 
  ...codeit, 
};

console.log(codeit); // {name: "codeit"}
console.log(codeitClone); // {name: "codeit"}

기존 객체를 활용해 새로운 객체 만들기

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