35장. 스프레드 문법

 

스프레드 문법 (spread syntax)

: 전개 문법 

: ... 은 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서(전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다.

 

ES6에서 도입되었다.

 

스프레드 문법을 사용할 수 있는 대상

: for...of 문으로 순회할 수 있는 이터러블에 한정된다.

=> Array, String, Map,Set, DOM 컬렉션(NodeList, HTMLCollection),arguments

 

스프레드 문법의 결과

여러 값들의 값이 중요한 것이 아니라 값들의 목록이 중요하다.

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

스프레드 문법 ... 이 피연산자를 연산하여 값을 생성하는 연산자가 아니라는 뜻이다.

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

const list = ...[1, 2, 3] // SyntaxError: Unexpected token ....

 

스프레드 문법의 결과물은 값으로 사용할 수 없고

다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다.

 

1.  함수 호출문의 인수 목록

2.  배열 리터럴의 요소 목록

3.  객체 리터럴의 프로퍼티 목록

 

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

 

=>  요소들의 집합인 배열을 펼쳐서 개별적인 값들의 목록으로 만든 후, 이를 함수의 인수 목록으로 전달해야하는 경우

 

const arr = [1, 2, 3];

const max = Math.max(arr); // NaN

Math.math(1) // 1
Math.math(1,2) // 2
Math.math(1,2,3) // 3
Math.math() // infinity

Math.max([1,2,3]) // NaN

// 스프레드 문법을 사용하여 배열 arr을 1,2,3으로 펼쳐서 Math.max 에 전달한다.
// Math.max(...[1,2,3])은 Math.max(1,2,3)과 같다.
const max = Math.max(...arr); //3

 

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

=> 스프레드 문법을 배열 리터럴에서 사용하면 ES5 에서 보다 더욱 간결하고 가독성 좋게 표현할 수 있다.

1.concat - 2개의 배열을 1개의 배열로 결합하고 싶은 경우

//ES5
var arr = [1, 2].concat([3, 4]);
console.log(arr); // [1, 2, 3, 4]

//ES6
const arr = [...[1, 2],...[3, 4]];
console.log(arr); // [1, 2, 3, 4]

2. splice - 어떤 배열의 중간에 다른 배열의 요소들을 추가하거나 제거하고 싶은 경우

//ES5
var arr1 = [1, 4];
var arr2 = [2, 3];

arr1.splice(1, 0, arr2);

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

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

arr.splice(1, 0, ...arr2);
console.log(arr1); // [1, 2, 3, 4]

 

3. 배열 복사

//ES5
var origin = [1, 2];
var copy = origin.slice();

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

//ES6
const origin = [1, 2];
const copy = [...origin];

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

4. 이터러블을 배열로 변환

 

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