[JS] spread (...) 문법

아래 링크를 보면서 학습했습니다. 글에 나온 코드의 원본이 있는 링크입니다.

poiemaweb.com/es6-extended-parameter-handling#3-spread-%EB%AC%B8%EB%B2%95

 

 

작용

spread는 대상을 개별 요소로 분리합니다.

 

조건

Spread 문법의 대상은 이터러블이어야 합니다.

 

// 배열
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

// 이터러블이 아닌 일반 객체는 Spread 문법의 대상이 될 수 없다.
console.log(...{ a: 1, b: 2 });
// TypeError: Found non-callable @@iterator

 

 

1 함수의 인수로 사용

배열을 분해, 함수의 인수로 사용하려면 Function.prototype.apply를 사용하는데 spread로도 가능합니다.

 

// ES5
function foo(x, y, z) {
  console.log(x); // 1
  console.log(y); // 2
  console.log(z); // 3
}

// 배열을 분해하여 배열의 각 요소를 파라미터에 전달하려고 한다.
const arr = [1, 2, 3];

// apply 함수의 2번째 인수(배열)는 분해되어 함수 foo의 파라이터에 전달된다.
foo.apply(null, arr);

// spread 문법 (배열의 요소를 분해하여 순차적으로 파라미터에 할당)
// foo(...arr);

// spread 문법을 사용한 매개변수 정의 
// ...rest는 분리된 요소들을 함수 내부에 배열로 전달합니다.
function foo(param, ... rest) {
	console.log(param); // 1
	console.log(rest); // [2, 3]
}
foo(1, 2, 3);

// spread 문법을 사용한 인수로, 배열 인수는 분리되어 순차적으로 매개변수에 할당
function bar(x, y, z) {
	console.log(x);
	console.log(y);
	console.log(z);
}

// 개별 요소로 분리하여 개별적인 인자로서 각각의 매개변수에 전달 
bar(... [1, 2, 3]);

 

 

2 배열에서 사용

 

const arr = [1, 2, 3]; 

// concat
// console.log(arr.concat([4, 5, 6]));

// concat을 대체
console.log([...arr, 4, 5, 6]); // [ 1, 2, 3, 4, 5, 6 ]

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];

// 기존 배열에 다른 배열의 개별 요소를 각각 push
// Array.prototype.push.apply(arr1, arr2);

// spread 문법으로 간편하게 표시
arr1.push(...arr2); // == arr1.push(4, 5, 6);

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

var arr1 = [1, 2, 3, 6];
var arr2 = [4, 5];

// 기존배열에 다른 배열의 개별 요소를 중간에 제거, 새 요소를 삽입
// Array.prototype.splice.apply(arr1, [3, 0].concat(arr2));

// spread 문법으로 간편하게
arr1.splice(3, 0, ...arr2); 

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

var arr  = [1, 2, 3];

// 기존 배열 복사
// var copy = arr.slice();

// js spread 사용
const copy = [...arr];

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

// copy를 변경한다.
copy.push(4);
console.log(copy); // [ 1, 2, 3, 4 ]

// arr은 변경되지 않는다.
console.log(arr);  // [ 1, 2, 3 ]

 

 

 

3 Rest/Spread 프로퍼티

 객체 리터럴을 분해하고 병합합니다. 

 

https://poiemaweb.com/es6-extended-parameter-handling#3-spread-%EB%AC%B8%EB%B2%95