Javascript - Spread Operator

 

인프런 자바스크립트 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.

 

Spread Operator

 

• Spread Operator 란?

특정 배열의 element를 하나씩 분리하여,  다른 배열의 element와 합칠 수 있는 기능이다.

<기본 개념>

//Spread Operator를 사용하지 않고 concat( ) 함수를 사용하는 경우

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

console.log(arr3);

// 결과 : [4, 5, 6, 1, 2, 3]

//이처럼 concat( ) 함수를 사용하면 두 배열을 합칠 수 있다.
//그러나 arr1 배열의 마지막 element 뒤에 arr2의 element가 합쳐지기 때문에,
//concat( ) 함수를 사용할 경우에는 유동적으로 배열의 element를 합칠 수가 없다.



//Spread Operator를 사용하여 배열을 합치는 경우

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

// 결과 : [1, 2, 3, 4, 5, 6]


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

console.log(arr2);

// 결과 : [1, 4, 5, 6, 2, 3]


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

console.log(arr3);

// 결과 : [1, 2, 3, 4, 5, 6]


var cd = "CD";
var alphabet = ['A', 'B',...cd];        

console.log(alphabet);

// 결과 : ["A", "B", "C", "D"]

//이처럼 Spread Operator를 사용하면, 배열 안의 원하는 위치에서 
//배열의 element를 자유롭게 합칠 수 있다.

//또한, 문자열도 하나의 글자를 각각 배열의 element로 합쳐 넣을 수 있다.