스프레드 문법

Spread 라는 단어의 의미: 펼치다, 퍼뜨리다

스프레드 문법(전개 문법)은 ES6에 도입된 문법으로,

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

 

스프레드 문법의 결과물은 값으로 사용할 수 없고, 쉽표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다.

1. 함수 인수 목록( myFunction (a, ...iterableObj, b) )

2. 배열 리터럴( [ 1, ...iterableObj, '4', 'five', 6 ] )

3. 객체 리터럴( { ...obj, key: 'value' } )

 

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

- apply() 배열의 요소를 함수에 대한 인수로 사용하려는 경우에 사용하는 것이 일반적이다.

function myFunction(x, y, z) {}
const args = [0, 1, 2];
myFunction.apply(null, args);

- 스프레드 구문 사용시 아래와 같다.

function myFunction(x, y, z) {}
const args = [0, 1, 2];
myFunction(...args);

- 인수 목록의 모든 인수는 스프레드 구문을 사용할 수 있고, 여러번 사용할 수 있다.

- 스프레드 구문 사용하면 더 간편하고 가독성이 좋다.

 

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

• concat
  • ES5에서는 2개의 배열을 1개의 배열로 합치고 싶을 때, concat 메서드를 사용해야한다.
  • 스프레드 문법을 사용하면 별도의 메서드를 사용하지 않고도 배열 리터럴으로 합칠 수 있다.

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

arr1 = [...arr1, ...arr2];
// arr1 is now [0, 1, 2, 3, 4, 5]

 

• splice
  • ES5에서 어떤 배열의 중간에 다른 배열의 요소들을 추가하거나 제거하려면 splice 메서드를 사용한다. 인수로 배열을 전달하면 배열 자체가 추가된다. 이때는, apply 메서드를 이용해 배열을 해체하고, concat을 이용해 배열로 합쳐야한다.
  • 스프레드 문법을 사용하면 다른 메서드 필요 없이 splice만으로 하나의 배열만으로 만들어진다

 

• 배열 복사
  • ES5에서 배열을 복사하려면 slice 메서드를 사용한다.
  • 스프레드 연산자를 이용해서 slice메서드의 효과를 얻을 수 있다
  • 원본 배열의 각 요소를 얕은 복사를 하여 새로운 복사본을 생성한다.

const arr = [1, 2, 3];
const arr2 = [...arr]; // like arr.slice()

arr2.push(4);
//  arr2 becomes [1, 2, 3, 4]
//  arr remains unaffected

• 이터러블을 배열로 변환
  • ES5에서 이터러블을 배열로 변환하려면 apply(), call() 메서드를 사용하여 slice()메서드를 호출해야한다
  • 스프레드 문법을 사용하면 더 간편하게 배열로 변환할 수 있다.
  • 하지만 이터러블이 아닌 유사 배열 객체는 스프레드 문법의 대상이 될 수 없다 -> Array.from 메서드 사용

function sum() {
	return [...arguments].reduce((pre, cur) => pre + cur, 0);
}

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

// 6

 

 

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

- 스프레드 프로퍼티가 제안되기 이전에는 Object.assign 메서드를 이용해서 여러 개의 객체를 병합하거나 특정 프로퍼티를 변경 또는 추가했다.

- 스프레드 프로퍼티는 Object,assign 메서드를 대체할 수 있다

// 객체 병합. 프로퍼티가 중복되는 경우 뒤에 위치한 프로퍼티가 우선권을 갖는다.
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:0};
console.log(added); // {x:1, y:2, z:0}

 

 

 

 

 

<출처>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_function_calls

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

https://ko.javascript.info/rest-parameters-spread