아래 링크를 보면서 학습했습니다. 글에 나온 코드의 원본이 있는 링크입니다.
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
