[모딥다] 35장 스프레드 문법

...을 이용해 뭉쳐 있는 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다.

📌 스프레드 문법의 결과는 값이 아니다.

따라서 스프레드 문법의 결과는 변수에 할당할 수 없다.

 

🩻 35.1 함수 호출문의 인수 목록에서 사용하는 경우

 

Math.max()

Math.max(...[1, 2, 4, 5]) 이런 식으로 사용 가능.

- 개수를 확정할 수 없는 가변 인자 함수

 

📌Rest 파라미터와 헷갈리지 말 것!

Rest 파라미터 : 함수에 전달된 인수들의 목록을 배열로 전달받기 위함.

스프레드 문법 : 여러개의 값이 하나로 뭉쳐있는 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만드는 것.

=> 서로 반대의 개념

//Rest 문법 예시

function foo(...rest) {
  console.log(Array.isArray(rest)); // true
  console.log(rest); // [ 1, 2, 3, 4, 5 ]
}

foo(1, 2, 3, 4, 5);

 

 

 

 

 

🩻 35.2 배열 리터럴 내부에서 사용하는 경우 

 

35.2.1 concat

- 2개의 배열을 1개의 배열로 결합하고 싶은 경우, concat 대신 사용 가능.

const arr1 = [1,2].concat([3,4]);
const arr2 = [...[1,2], ...[3,4];

//둘 다 [1, 2, 3, 4]

 

35.2.2 splice

- 배열의 중간에 다른 요소를 추가하거나 제거할 때

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

//splice 사용
arr1.splice(1, 0, arr2); //[1, [2, 3], 4] 가 나옴.

//spread 와 함께 사용
arr1.splice(1, 0, ...arr2); //[1, 2, 3, 4]

 

35.2.3 배열 복사

const arr = [1, 2];

arr.slice();  한 것과
[...arr] 한 것과 같음

=> 각 배열의 얕은 복사가 이루어짐.

 

35.2.4 이터러블을 배열로 변환

 

 

 

 

🩻 35.3 객체 리터럴 내부에서 사용하는 경우 

 

일반 객체도 스프레드 연산자 사용 가능.

const merged = { x:1, y:2, ...{a:3, b:4}};
console.log(merged); 
//{ x:1, y:2, a:3, b:4}

=> 프로퍼티가 중복되는 경우, 뒤에 위치한 프로퍼티가 우선권을 갖는다.

{ ...{x:1, y:2}, ...{y:10, z:3}}
// { x:1, y:10, z:3 }