JavaScript / {...} 의미? / 스프레드 연산자 / 문법 / 사용법

Q. 스프레드 연산자란?

-> 3개의 점(...)으로 이루어진 연산자

 

Q. 이러한 스프레드 연산자는 왜 사용하는가?

-> 스프레드 연산자를 사용하면 특정 배열의 원소를 한번에 불러올 수 있다.

 

Q. 언제 사용하면 좋은가?

 

1) 배열의 내용을 조합할 때

 

예를 들어, 두 배열이 있을 때, 두 배열의 모든 원소가 들어간 세 번째 배열을 쉽게 만들 수 있다.

const fruits = ["apple", "banana", "peach"];
const drink = ["coke", "soda", "milk"];
const snack = [...fruits, ...drink];

console.log(snack.join(', '));

위 코드를 실행해보면 콘솔 창에 fruits와 drink의 원소들이 차례대로 snack이란 배열에 담겨있음을 알 수 있다.

 

2) 원본 배열을 바꾸지 않고 복사본을 만들어 사용하고 싶을 때

 

fruits란 변수의 마지막 원소를 변수에 담고 싶을 경우 어떻게 해야 할까?

Array.reverse 메서드를 이용하여 배열을 뒤집고, 구조 분해를 통해 첫 번째 원소를 변수에 넣는 방법이 있다.

그러나, 이러한 방법은 fruits란 배열의 원본까지 뒤집어버리기 때문에 기존의 배열 순서는 지킬 수 없다.

이 때, 스프레드 연산자를 사용한다면 배열의 복사본을 만들어서 뒤집기가 가능하다.

 

const fruits = ["apple", "banana", "peach"];
const [last] = [...fruits].reverse();

console.log(last);
console.log(fruits.join(', '));

위 코드를 실행해보면 콘솔 창에 다음과 같이 출력된다.

last를 출력하면 fruits의 가장 마지막 원소인 peach가 출력되고,

fruits의 원소를 출력하면 배열의 순서가 그대로 유지되는 것을 확인할 수 있다.

 

 

배열의 여러 원소를 한번에 담을 수 있는 이러한 ... 문법은

나머지 배열을 한꺼번에 배열에 담아 처리할 때도 매우 편리하다.

이러한 스프레드 연산자를 자유자재로 활용해보자!

 

 

참고 : 러닝 리액트(2판) (알렉스 뱅크스 저, 오현석 역, 한빛미디어)