스프레드연산자 (...) spread 연산

하나로 뭉쳐 있는 여러 데이터들의 집합을 개별적인 값으로 분류

Iterable객체에 적용할 수 있다(Array, String, Map, Set, DOM nodelist, arguments)

 

예제)

let arr = [1, 2, 3, 4];

let a = { ...arr }; 
let b = [...arr];
let arrObject = { '0': 1, '1': 2, '2': 3, '3': 4 }

console.log(...arr); //1 2 3 4
console.log(a); // { '0': 1, '1': 2, '2': 3, '3': 4 }
console.log(b); // [ 1, 2, 3, 4 ]

 

함수의 인자값으로 넣는 예

function sum(a, b, c) {
	return a + b + c;
}
let pre = [100, 200, 300];
console.log('sum=', sum(...pre)); //sum= 600
console.log(...pre) //100 200 300

 

몇개 수가 배열에 있는지 모르므로 첫번째, 두번째 값은 first, second에 넣고 나머지는 nums에 배열로 넣기 

function sum(first, second, ...nums) {
	console.log(first); //1
	console.log(second); //2
	console.log(nums); //[0,1,2,4]
}
sum(1, 2, 0, 1, 2, 4);

 

오브젝트합치기1)현재버전

let obj1 = { a: 3 };
let obj2 = { b: 4 };
let newMergedObj = { ...obj1, ...obj2 };

console.log(newMergedObj); //{ a: 3, b: 4 }

 

오브젝트합치기2)예전버전

let obj1 = { a: 3 };
let obj2 = { b: 4 };
// //ES5에서 오브젝트 합치기
let mergedObj = Object.assign({}, obj1, obj2);
console.log(mergedObj);

 

배열합치기1) 현재버전

let arr1 = [2, 3, 4];
let arr2 = [5, 6, 7];
const newMerged = [...arr1, ...arr2];

배열합치기2)예전버전

let arr1 = [2, 3, 4];
let arr2 = [5, 6, 7];
let merged = arr1.concat(arr2);

배열복사하기1) 현재버전

let arr1 = [2, 3, 4];
let arr2 = [5, 6, 7];
const newCopied = [...arr1];

배열복사하기2)예전버전

let arr1 = [2, 3, 4];
let arr2 = [5, 6, 7];
let copied1 = arr1.slice();

객체 스프레드 복제 시 주의할 것

const nabi = {
	name: '나비',
	kind: '고양이',
	actions: ['잠자기', '먹기'],
};

let update1 = Object.assign({}, nabi);
update1.age = 4;
update2 = { ...nabi, age: 4 };
console.log('===== 수정 전 =====');
console.log(update2);
update2.name = '냐옹이';
console.log('=====수정 후=====');
console.log(nabi);
console.log(update2);
console.log('=====주의=====');
update2.actions[0] = '낮잠자기';
console.log(nabi); 
//객체복제한건데 기존 나비의 값이 변경되어버렸다? nabi의 action을보면 배열로 되어있어서 그렇다. 주소값을 복사해버린것..
console.log(update2);