스프레드 문법( ... ) 집합체인 값들을 개별값으로 푼다.

스프레드 문법 ( ... )

하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다.

• 스프레드 문법의 결과는 값이 아니다. 
• 아래 예제의 ...[1,2,3]로 펼친 요소들인 1 2 3 은 값이 아니라 값들의 목록이다.
  이는 스프레드 문법이 값을 생성하는 연산자가 아님을 뜻한다.
• 따라서 스프레드 문법의 결과는 변수에 해당할 수 없다.

// 개별요소로 분리함
console.log(...[1,2,3]) // 1 2 3
console.log(...'hello') // h e l l o

// 일반객체는 스프레드 문법의 대상이 될 수 없다
console.log(...{a:1, b:2}) //typeError: Found non-callable @@iterator

 

문법의 결과물은 값의 목록을 사용하는 문에서 사용할 수 있다

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

 

스프레드 문법의 활용 - 함수 호출문의 인수 목록

배열을 펼쳐서 개별적인 값의 목록으로 만든 후, 함수의 인수 목록으로 전달해야 하는 경우

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

// Math.max메서드에 배열을 인수로 전달하면 최대값을 구할 수 없다
console.log(max) // NaN


// 스프레드 문법으로 배열의 요소를 풀어서 인수로 전달한다.
const max = Math.max(...[1,2,3]) // 3

 

Rest파라미터 (나머지 매개변수) 와 혼동 주의!

• Rest파라미터는 매개변수 이름 앞에 세 개의 점... 을 붙여서 정의한 매개변수를 의미한다.
• Rest파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다
• 스프레드 문법은 Rest 파라미터와 형태가 동일하지만 반대의 개념이므로 주의한다.

// Rest 파라미터 
function foo( ...rest ){
  console.log(rest) //[ 1, 2, 3, 4, 5 ] 인수로 전달된 값들을 배열로 반환한다
}
foo(1,2,3,4,5)

//스프레드문법 : 여러 값들의 집합을 풀어서 개별적인 목록으로 만든다
function foos( ...rest ){ // 스프레드문법으로 펼친 1,2,3,4,5를 rest파라미터로 받아들여서 배열로 출력한다
  console.log( rest ) //[ 1, 2, 3, 4, 5 ]
}
foos(...[1,2,3,4,5])

 

 

 

스프레드 문법의 활용 - 배열 리터럴의 요소 목록

배열에서 스프레드 문법을 사용하게 되면 기존의 방식보다 간결하게 표현할 수 있다

(1) concat 배열결합

// 배열 결합
let arr1 = [1,2].concat([3,4]);
console.log(arr1) // [1,2,3,4]

// 스프레드 문법의 배열 결합
let arr2 = [...[1,2], ...[3,4]]
console.log(arr2) // [1,2,3,4]

 

(2) splice 배열추가 / 삭제

// splice로 배열 중간에 삽입
const arr1 = [1, 4]
const arr2 = [2, 3]
arr1.splice(1, 0, arr2)
	// 1: 변경을 시작할 인덱스 (= 1번째 인덱스 자리에 추가하겠다)
	// 0: 제거할 요소의 수 ( 0 이하면 요소 제거X)
	// arr2: 추가할 요소, 요소를 지정하지 않으면 제거만 함
    
console.log(arr1) // [1, [2, 3], 4], 배열이 그대로 삽입됨


// 스프레드 문법 사용
const arr1 = [1, 4]
const arr2 = [2, 3]
arr1.splice(1, 0, ...arr2) 

// 스프레드 문법을 사용하여 arr2의 배열을 풀어서 삽입됨
console.log(arr1) // [1, 2, 3, 4]

 

(3) slice 배열 복사

// splice활용
let origin = [1,2]
let copy = origin.slice()

console.log(copy) // [1, 2]
console.log(copy === origin) // false

// 스프레드 문법
let origin = [1,2]
let copy = [...origin]

console.log(copy) // [1, 2]
console.log(copy === origin)

 

 

 

스프레드 문법의 활용 - 객체 리터럴의 프로퍼티 목록

일반 객체는 스프레드 문법을 사용할 수 없지만, 객체 리터럴의 내부에서는 일반 객체도 스프레드 문법을 사용할 수 있다.

// 스프레드 문법은 얕은 복사
const obj = {x:1, y:2};
const copy = {...obj};
console.log(copy)         // {x:1, y:2}
console.log(obj === copy) // false


// 객체 병합
const merged = { x:1, y:2, ...{a:3, b:4}};
const s_merged = { ...obj, ...{a:3, b:4}}

// 위의 두 객체 모두 결과의 형태는 같으나 === 비교를 해보면 false로 나온다.
console.log(merged) // {x:1, y:2, a:3, b:4};
console.log(s_merged) // {x:1, y:2, a:3, b:4};

console.log(merged === copy) //false