[JavaScript] 스프레드 오퍼레이터(Spread Operator)

 

Spread Operator

마침표를 연달아 3개 ( ... ) 를 찍는 문법을  스프레드 오퍼레이터(Sprade Operator)라고 합니다.

한글로는 '펼침연산자'라고도 합니다.

 

스프레드 오퍼레이터는 대괄호, 중괄호, 소괄호 안에서만 사용 가능하며 외부에서 사용할 경우, 에러가 발생합니다.

 

 

 

1. 스프레드 오퍼레이터는 배열(Array)에 사용하면 대괄호를 제거하여 나타내줍니다.

var array = ['hello', 'world'];

console.log(array); // -> ['hello', 'world']
console.log(...array); 
// -> 스프레드 오퍼레이터가 대괄호를 제거해주어 'hello', 'world'로 변환되어 
//    최종적으로 hello world가 출력된다.

 

 

 

2. 스프레드 오퍼레이터를 문자에 사용하면 각 문자가 펼쳐져서 나타내줍니다.

var text = 'hello';
console.log(...text);
// -> 'h','e','l','l','o' 로 펼쳐주게 되어 최종 값으로 h e l l o 가 된다.

 

 

 

 

3. 스프레드 오퍼레이터의 활용방법 - 1. 어레이 합치기

var a = [1, 2, 3];
var b = [4, 5];

var c= [...a, ...b];
console.log(c); // -> 배열 a, b가 스프레드 오퍼레이터로 합쳐져 1,2,3,4,5 가 된다.

 

 

4. 스프레드 오퍼레이터의 활용방법 - 2. Deep copy

var a = [1, 2, 3];
var b = a;

console.log(b); // -> [1, 2, 3]

a[3] = 4;

console.log(b); // -> [1, 2, 3, 4]

 

위 처럼 a의 배열을 b에 보여주는 방법을 나타낼 수 있지만 a의 배열값을 바꾸게 되면 변수 b 또한 바뀌게 됩니다. 

즉, b는 a를 복사한 별개의 데이터가 아닙니다. a의 값과 b값이 공유를 하고 있는 것입니다.

 

레퍼런스 데이터 타입(Reference Data Type)에 속하는 배열(Array)과 오브젝트(Object)는 위와 같은 b = a; 는 데이터를 복사한 새로운 변수를 만드는 것이 아닌 변수값을 공유하는 변수명을 만들게 되는 것입니다.

 

그렇다면 레퍼런스 데이터 타입(Reference Data Type)은 어떤 방법으로 단독적으로 복제된 변수를 만들 수 있을까요?

바로 스프레드 오퍼레이터를 사용하여 이를 해결할 수 있습니다.

var a = [1,2,3];
var b = [...a]; // 스프레드 오퍼레이터 사용

a[3] = 4;

console.log(a); // -> [1,2,3,4]
console.log(b); // -> [1,2,3]

 

 

 

5. 스프레드 오퍼레이터의 활용방법 - 3. 오브젝트 합치기 / Deep copy

// 오브젝트 합치기
// obj2에 obj1에 있던 값을 복사해서 넣는 방법
var obj1 = {a:1, b:2};
var obj2 = {...obj1, c:3};

console.log(obj2); // -> {a:1, b:2, c:3}


// 값을 복사하는 중 중복된 키가 있다면 가장 뒤에 있는 키값을 적용하게 된다.

var obj1 = {a:1, b:2};
var obj2 = {...obj1, a:2}; // obj1의 a와 obj2의 a중 더 뒤에 있는 값인 a:2를 적용

console.log(obj2); // -> {a:2, b:2}

 

 

 

6. 스프레드 오퍼레이터의 활용방법 - 4. 함수에 파라미터 넣을 때

// array내의 모든 데이터를 함수의 파라미터 안에 넣어서 실행시키는 방법

// 스프레드 오퍼레이터 없이 하는 방법

function add(a,b,c){
	console.log(a + b + c)
}

var array = [10, 20, 30];

add(array[0], array[1], array[2]); // 방법1
add.apply(undefined, array); // 방법2

// -> 60

-------------------------------
// 스프레드 오퍼레이터를 사용한 방법
function add(a,b,c){
	console.log(a + b + c)
}

var array = [10, 20, 30];

add(...array);

// -> 60