스프레드 문법

스프레드 문법

하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서 (spread) 개별적인 값들의 목록으로 만든다.
스프레드 문법의 결과는 값이 아니기 때문에 변수에 할당할 수 없고 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다.

• 함수 호출문의 인수 목록
• 배열 리터럴의 요소 목록
• 객체 리터럴의 프로퍼티 목록

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

const arr = [1,2,3]
const max = Math.max(...arr) // 3

스프레드 문법은 앞의 Rest 파라미터와 형태가 동일하기 때문에 주의 필요!

Rest 파라미터는 인수들의 목록을 배열로 전달 받는다.

function foo(...rest){
  console.log(rest)
} // 1,2,3 -> [1,2,3]

스프레드 문법은 배열과 같은 이터러블을 펼쳐 개별적인 값의 목록을 만든다.

foo(...[1,2,3]) // [1,2,3] -> 1,2,3

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

// 2개의 배열 1개로 결합
const arr = [...[1,2], ...[3,4]]
console.log(arr) // [1,2,3,4]
// 중간에 다른 배열의 요소를 추가하거나 제거 - splice 메서드 사용
const arr1 = [1,4]
const arr2 = [2,3]
arr1.splice(1,0,...arr2) 
// 첫번째 인수는 요소를 제거하기 시작할 인덱스, 
// 두번째는 제거할 요소의 개수, 세번째는 삽입할 요소들의 목록이다.
console.log(arr1) // [1,2,3,4]

객체 내부에서 사용하는 경우 多

// 객체 병합 중복되는 경우 뒤에 위차한 프로퍼티가 우선권을 갖는다.
const merged = {...x:1, y:2},...{y:10, z:3}}
console.log(merged) // {x:1, y:10, z:3}
// 특정 프로퍼티 변경
const changed = {...{x:1, y:2}, y:100}
console.log(changed) // {x:1, y:100}
// 프로퍼티 추가
const added = {...{x:1, y:2},z:3}
console.log(added) // {x:1, y:2, z:3}