spread operator

전개 연산

ES6에서 등장한 배열 전개 연산(spread opeartor)은 배열의 모든 요소를 개별 요소로 변환한다.

브라우저 호환성

JavaScript operator: Spread syntax (...) | Can I use... Support tables for HTML5, CSS3, etccaniuse.com

사용법

const arr = [10, 20, 30, 40, 50];
console.log(...arr);

배열 깊은 복사

Legacy code

for

var arr = [10, 20, 30, 40, 50];
var copyArr = [];

for(var i=0; i < arr.length; i++) {
    copyArr.push(arr[i]);
}

forEach

var arr = [10, 20, 30, 40, 50];
var copyArr = [];

arr.forEach(value=>copyArr.push(value));

JSON

const arr = [10, 20, 30, 40, 50];
const copyArr = JSON.parse(JSON.stringify(arr));

Spread operator

const arr = [10, 20, 30, 40, 50];
const copyArr = [...arr];

배열 합치기

Legacy code

for

var arr1 = [10, 20, 30], arr2 = [100, 200];
var arr3 = [];

for(var i=0; i < arr1.length; i++){
    arr3.push(arr1[i]);
}
for(var i=0; i < arr2.length; i++){
    arr3.push(arr2[i]);
}

concat

const arr1 = [10, 20, 30], arr2 = [100, 200];
const arr3 = arr1.concat(arr2);

Spread operator

const arr1 = [10, 20, 30], arr2 = [100, 200];
const arr3 = [...arr1, ...arr2];