[JS] Spread Operator 알아보기

오늘은 Front-End파트에서 Java Script의 배열을 배우면서 indexOf, join, concat와 같은 메소드를 배웠다.

그 중, 배열을 합치는 메서드인 concat를 배우면서 Spread OPerator라는 단어를 들었다.

Spread Operator단어만 언급하고 넘어가서 무엇을 의미하는지 궁금해 찾아보게 되었고

오늘 정리할 주제로 선정하게 됐다.

 

우리는 배열을 합치고자 할 때 아래의 코드처럼 concat 메소드를 사용한다.

var arr1 = [1,2,3]

var arr2 = []

arr2 = arr1.concat(1,2);
//결과: arr2 = [1,2,3,1,2]

 

하지만 Spread Operator를 쓰게 되면 아래의 코드로 구현할 수 있다.

var arr1 = [1,2,3]

var arr2 = [...arr1, 1,2]
//결과: arr2=[1,2,3,1,2]

concat메서드 없이 ...arr1이라는 Spread Operator를 통해 배열을 합칠 수 있다.

이것을 봐서 Spread Operator가 ...인 것같은데 Spread Operator는 무슨 역할을 하는 것일까?

 

Spread Operator는 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리하는 역할을 한다.

즉, arr1은 1, 2, 3 세 개의 요소로 이루어진 배열이다.

이 배열에 Spread Operator을 사용하게 되면 배열의 개별 요소로 분리되어 배열이 아닌 1, 2, 3으로 되게 된다.

배열 외에도 문자열을 Spread Operator해본다면 개별 요소로 분리되어 나온 것을 확인할 수 있다.

var str1 = 'ratel blog'; 
var arr1 = [...str1]; 
console.log(arr1);
// [ "r", "a", "t", "e", "l", " ", "b", "l", "o", "g"]

설명만 보면 무슨 의미인지 감이 잘 안 올 수 있다.

간단한 활용예제를 알아보며 Spread Operator를 알아보자.

 

 

우리는 = 연산자를 활용하여 복사를 많이 한다. 하지만, 배열에서 =연산자를 사용하면 해당 변수에 담긴 값이 복사되는 것이 아닌 그 변수가 참조하는 주소가 복사가 된다.

이렇게 주소를 복사하는 = 연산자를 사용하게 되면 문제점이 원래 배열의 변수나 복사한 배열의 변수 둘 중 하나를 변환하면 둘 다 변환된다는 것이다.

코드를 보며 알아보자.

var arr1 = ['국', '밥']
var arr2 = arr1

arr2.push('반찬')

console.log(arr1)
// ['국'. '밥', '반찬']

console.log(arr2)
// ['국'. '밥', '반찬']

['국','밥']이라는 배열을 가진 arr1 변수를 선언한 후, 변수 arr2를 선언하고 arr1을 복사했다.

그 후, arr2 배열에 '반찬'이라는 요소를 추가했는데 우리가 원하는 것을 arr2 배열에만 '반찬'을 추가는 것이였다.

하지만, arr1에도 '반찬'이 추가 되었다.

이렇게 =연산자는 주소를 복사하는 것이기에 문제가 발생할 수 있다.

 

그래서 주소를 복사하는 것이 아닌 실제 가지고 있는 값을 복사하기 위해 slice메소드나 map을 이용한다.

이 외에도 오늘 배운 Spread Operator를 이용하여 값을 복사할 수 있다.

var arr1 = ['국','밥']; 
var arr2 = [...arr1]; 

arr2.push('반찬'); 

console.log(arr1);
// [ '국','밥']
console.log(arr2); 
// ['국','밥', '반찬']

위 코드처럼 Spread Operator를 사용해서 arr2에 복사한 후 arr2.push()를 통해 새로운 값을 넣어주면

기존의 배열인 arr1은 바뀌지 않고 arr2만 바뀐 것을 볼 수 있다.

Spread Operator를 사용하면 얕은 복사가 가능하기에 값을 복사할 수 있는 것이다.

 

이 외에도 Spread Operator는 다양한 곳에 사용할 수 있다.