Javascript 문법 - [ ...변수 ] : 스프레드 연산자(spread)에 대해 설명해줄께 !!

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" ]

스프레드를 안쓰고 이렇게 하는건 안되나 ? 

var arr1 = [1,2,3]
var arr2 = [4,5,6]

var arr =[arr1,arr2]

console.log(arr)

[ [ 1, 2, 3 ], [ 4, 5, 6 ] ]

결과는 이렇게 나온다 . 

concat 사용

var arr1 = [1,2,3]
var arr2 = [4,5,6]

var arr =arr1.concat(arr2);

console.log(arr)

spread 사용 

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]

spread 연산자를 사용하면 원본 변경없이 복사본 변경이 가능하다 

var arr1 = ['a','b']; 
var arr2 = [...arr1]; 

arr2.push('c'); 

console.log(arr2); // [ "a", "b", "c" ]
// 원본 배열은 변경되지 않습니다.
console.log(arr1); // [ "a", "b" ]