spread operator

1. 개요

 1) ES6에서 추가된 문법

 2) 스프레드 연산자, 산개 연산자, 전개 구문 등의 용어로 번역되어 사용중

 

2. 사용 예

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

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

//-------------------------------------------------------------------------

const str1 = 'recyclebin';
const str2 = [...str2];

console.log(str2);	// ["r", "e", "c", "y", "c", "l", "e", "b", "i", "n"]

//-------------------------------------------------------------------------

var obj = {
   a:3,
   b:33
}

var newObj = {...obj};
console.log(newObj);	// {a:3, b:33}

 

3. 함수에서 사용

 1) rest parameter

  (1) 함수를 호출할 때 parameter를 spread operator로 작성한 형태

  (2) rest parameter를 사용하면 함수의 parameter로 오는 값을 모아서 배열에 집어 넣고 사용 가능

 

 2) 함수 호출 인자

var num1 = [5, 7, 0, 1];
console.log(Math.max(...num1));	// 7

//-------------------------------------------------------------------------

var num2 = [{name:"a", age:1}, {name:"b", age:2}, {name:"c", age:3}];

var maxNum = Math.max(...num2.map((item) => item.age));
console.log(maxNum);	// 3

 

 

4. 객체에서 사용: 객체의 복사, 업데이트

var state = {
   name:'바보',
   sex:'male'
};

state = {
	...state,
    age:99
}

console.log(state);	// {name:"바보", sex:"male", age:99}

state = {
	...state,
    name:'멍청이',
    age:90
}

console.log(state);	// {name:"멍청이", sex:male, age:90}