JavaScript spread operator

ES6에서는  '...'와 같이 다소 특이한 형태의 문법이 추가됨. 점 3개가 연달아 붙어있는 이 표시는 Spread Opertor(스프레드 오퍼레이터, 스프레드 연산자, 전개 구문, 펼침 연산자...)를 나타내는 것으로, 배열, 함수, 객체 등을 다루는 데 있어서 매우 편리함을 제공.

 

Spread Operator 기본 문법

배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있다.

// Array
var arr1 = [1, 2, 3, 4, 5]; 
var arr2 = [...arr1, 6, 7, 8, 9]; 

console.log(arr2); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

// String
var str1 = 'paper block'; 
var str2 = [...str1]; 
console.log(str2); // [ "p", "a", "p", "e", "r", " ", "b", "l", "o", "c", "k" ]

스프레드 연산자는 연결, 복사 등의 용도로 꽤 활용도가 높은 편

 

배열에서의 Spread Operator

배열 병합 (Array Concatenation)

기존의 두 개의 배열을 결합하는 데 있어서 concat 메서드를 이용하는 대신에. ES6에서는 spread 연산자를 이용하여 배열 병합이 가능.

// 기존 방식
var arr1 = [1,2,3]; 
var arr2 = [4,5,6]; 

var arr = arr1.concat(arr2); 
console.log(arr); // [ 1, 2, 3, 4, 5, 6 ] 

// ES6 spread operator
var arr1 = [1,2,3]; 
var arr2 = [4,5,6]; 

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

다양한 형태의 배열 병합을 비교적 간단하게 수행

var arr1 = [1,2,3]; 
var arr2 = [4,5,6]; 
arr1.push(...arr2) 

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


var arr1 = [1,2];
var arr2 = [0, ...arr1, 3, 4];

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

배열 복사 (Copying Arrays)

배열을 새로운 변수에 할당하는 경우 새로운 배열은 기존 배열을 참조합니다. 따라서 새로운 배열을 변경하는 경우 원본 배열 역시 변경.

// 단순 변수 할당
var arr1 = ['규성','규영']; 
var arr2 = arr1; 

arr2.push('영철이'); 
console.log(arr2); // [ "규성", "구영", "영철이" ]
// 원본 배열도 변경됩니다.
console.log(arr1); // [ "규성", "규영", "영철이" ]

배열 복사를 위해서 기존에는 slice 또는 ES5의 map을 이용하여 배열을 복사.

// Javascript array 복사
var arr1 = ['철수','영희']; 
var arr2 = arr1.slice();

arr2.push('바둑이'); 
console.log(arr2); // [ "철수", "영희", "바둑이" ]
// 원본 배열은 변경되지 않습니다.
console.log(arr1); // [ "철수", "영희" ]


// ES5 map 
var arr1 = ['철수','영희']; 
var arr2 = arr1.map((item) => item);

arr2.push('바둑이'); 
console.log(arr2); // [ "철수", "영희", "바둑이" ]
// 원본 배열은 변경되지 않습니다.
console.log(arr1); // [ "철수", "영희" ]

 Spread 연산자를 사용하면, 다음과 같이 새로운 복사된 배열을 생성

// ES6 spread operator
var arr1 = ['철수','영희']; 
var arr2 = [...arr1]; 

arr2.push('바둑이'); 

console.log(arr2); // [ "철수", "영희", "바둑이" ]
// 원본 배열은 변경되지 않습니다.
console.log(arr1); // [ "철수", "영희" ]

Spread 연산자를 이용한 복사는 얕은(shallow) 복사를 수행하며, 배열 안에 객체가 있는 경우에는 객체 자체는 복사되지 않고 원본 값을 참조.

var arr1 = [{name: '철수', age: 10}]; 
var arr2 = [...arr1]; 

arr2[0].name = '영희';

console.log(arr1); // [ {name:'영희', age: 10}]
console.log(arr2); // [ {name:'영희', age: 10}]

함수에서의 Spread Operator

Rest Parameter

함수의 매개변수(parameter)를 spread operator로 작성한 형태를 Rest parameter 라고 함.

함수의 파라미터로 오는 값들을 모아서 "배열"에 집어넣는다.

function add(...rest) {
  let sum = 0;
  for (let item of rest) {
    sum += item;
  }
  return sum;
}

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

Rest parameter를 이용하면 인자의 개수에 상관없이 모든 인자를 이용하는 함수를 쉽게 구현.

function addMul(method, ...rest){ 
  if (method === 'add') {
    let sum = 0;
    for (let item of rest) {
      sum += item;
    }    
     return sum;    
  } else if (method === 'multiply'){
    let mul = 1;
    for (let item of rest) {
      mul *= item;
    }
     return mul;    
  }
 
} 

console.log( addMul('add', 1,2,3,4) ); // 10
console.log( addMul('multiply', 1,2,3,4) ); // 24

Rest파라미터는 항상 제일 마지막 파라미터로 있어야 합니다

 

함수 호출 인자로 사용

함수를 Call 할 때 spread operator를 사용.

spread operator를 이용하면 배열 형태에서 바로 함수 인자로 넣어줄 수 있슴.

var numbers = [9, 4, 7, 1]; 
Math.min(...numbers); // 1

 

var input = [{name:'철수',age:12}, {name:'영희',age:12}, {name:'바둑이',age:2}];

//가장 어린 나이 구하기.
var minAge = Math.min( ...input.map((item) => item.age) );
console.log(minAge); // 2

객체 복사 또는 업데이트

객체의 복사 또는 프로퍼티를 업데이트 할 수 있음.

var currentState = { name: '철수', species: 'human'};
currentState = { ...currentState, age: 10}; 

console.log(currentState)// {name: "철수", species: "human", age: 10}

currentState = { ...currentState, name: '영희', age: 11}; 
console.log(currentState); // {name: "영희", species: "human", age: 11}

객체의 프로퍼티를 오버라이드 함으로써 객체가 업데이트됨.

 

Destructuring

Spread Operator는 배열이나 객체에서의 destructuring에 사용됨. 이는 rest parameter에 가까운 형태임.

var a, b, rest;
[a, b] = [10, 20];

console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest); // [30,40,50]

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}