[Deep dive] 35장 스프레드 문법

스프레드 문법(spread syntax)

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

- 스프레드 문법을 사용할 수 있는 대상은 for ... of문으로 순회할 수 있는 이터러블에 한정

- 스프레드 문법의 결과는 값들의 목록이므로 변수에 할당 불가 

// ...[1,2,3]은 [1,2,3]을 개별 요소로 분리 
console.log(...[1,2,3]); //1 2 3

//문자열은 이터러블
console.log(...'Hello'); //H e l l o

//Map과 Set은 이터러블 
console.log(...new Map([['a','1'],['b','2']])); //[ 'a', '1' ] [ 'b', '2' ]
console.log(...new Set([1,2,3])); //1 2 3

 

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

 

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

- Math.max 메서드 사용 

 - [1,2,3]을 1,2,3으로 펼쳐서 Math.max 메서드의 인수로 전달 

const arr = [1,2,3];

//스프레드 문법을 사용해서 배열 arr을 1,2,3으로 펼텨서 Math.max에 전달
const max = Math.max(...arr); //3

- Rest 파라미터와 혼동 주의 

Rest 파라미터	함수에 전달된 인수들의 목록을 배열로 전달받기 위해 매개변수 이름 앞에 ...을 붙이는 것
스프레드 문법	여러 개의 값이 하나로 뭉쳐 있는 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만드는 것

//Rest 파라미터는 인수들의 목록을 배열로 전달받음
function foo(...rest) {
  console.log(rest); //1,2,3 => [1,2,3]
}

//스프레드 문법은 이터러블을 펼쳐서 개별적인 값들의 목록을 만듬
foo(...[1,2,3]); //[1,2,3] => 1,2,3

 

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

 

35.2.1 concat

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

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

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

 

35.2.2 splice

- 어떤 배열의 중간에 다른 배열의 요소들을 추가하거나 제거 

- ES5에서는 Function.prototype.apply 메서드를 사용하여 splice 메서드를 호출

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

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

 - ES6 스프레드 문법 

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

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

 

35.2.3 배열 복사 

- ES5에서 배열을 복사하려면 splice 메서드 사용 

- 스프레드 문법을 사용하면 간결하고 가독성 좋게 표현 가능

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

console.log(copy); //[ 1, 2 ]
console.log(copy === origin); //false -> 얕은 복사 

//ES6
var origin2 = [1,2];
var copy2 = [...origin2];

console.log(copy2); //[ 1, 2 ]
console.log(copy2 === origin2); //false -> 얕은 복사

 

35.2.4 이터러블을 배열로 반환 

- ES5에서 이터러블을 배열로 변환하려면 Function.prototype.apply 또는 Function.prototype.call 메서드를 사용하여 slice 메서드를 호출

- 이터러블이 아닌 유사 배열 객체도 배열로 변환 가능 

//ES5
function sum() {
  //이터러블이면서 유사 배열 객체인 arguments를 배열로 반환
  var args = Array.prototype.slice.call(arguments);

  return args.reduce(function (pre,cur) {
    return pre+cur;
  },0);
}

console.log(sum(1,2,3)); //6

- 스프레드 문법을 사용하면 좀 더 간편하게 이터러블을 배열로 변환 가능

- 단, 이터러블이 아닌 유사 배열 객체는 스프레드 문법의 대상이 될 수 없음

function sum() {
  //이터러블이면서 유사 배열 객체인 arguments를 배열로 반환
  return {...arguments}.reduce((pre,cur) => pre+cur,0);
}

console.log(sum(1,2,3)); //6

 

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

 

- 스프레드 문법의 대상은 이터러블이어야 하지만 스프레드 프로퍼티 제안은 일반 객체를 대상으로도 스프레드 문법의 사용을 허용 

- 스프레드 프로퍼티를 사용하면 객체 리터럴의 프로퍼티 목록에서도 스프레드 문법 사용 가능

//스프레드 프로퍼티 
//객체 복사(얕은 복사)
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}};
console.log(merged); //{ x: 1, y: 2, a: 3, b: 4 }