[013] 자바스크립트 (JavaScript) - 스프레드 연산자 사용(Spread Operator)

안녕하세요~ totally 개발자입니다.

 

Spread Operator

 

오늘은 배열을 다룰 때 정말 많이 활용되는 스프레드 연산자(Spread Operator)에 대해 살펴봅니다. 스프레드 연산자는 ...으로 사용되며 신속하게 배열 또는 객체의 일부 또는 전체를 다른 배열 혹은 객체로 복사할 때 사용됩니다. 가장 기본적인 예시를 통해 어떻게 사용되는지 확인해보도록 하겠습니다.

 

1) 기존 배열을 복사하여 새로운 배열을 만들 때 사용

const array1 = ["a", "b", "c"];
const array2 = ["d", "e", "f"];
const array3 = [...array1, ...array2];
console.log(array3);

array1과 array2를 a,b,c와 d,e,f로 선언하였을 때 ...array1, ...array2를 사용하고 대괄호 []로 감싸줌으로써 array3은 배열로 감싸서 array1과 array2에 있는 모든 요소들을 취합하라는 의미입니다. 

 

 

2) 기존 배열을 새 변수들로 분리할 때(Deconstructing) 사용

 

위에서는 새로운 배열을 만들 때 사용되었다면 이번에는 분리 즉 해체할 때(Deconstructing)에도 사용됩니다.

 

const coffeeMenus = ["Latte", "Americano", "Moca", "Tea"];
const [first, second, ...otherCoffeeMenus] = coffeeMenus;
console.log(first);
console.log(second);
console.log(...otherCoffeeMenus);

 

위 화면을 보시면 coffeeMenus에 4가지의 커피 요소들을 넣었고, 그 다음 줄에서는 [first, second, ...otherCoffeeMenus]를 만들어서 4개의 요소였던 coffeeMenus 배열을 해체하여(Deconstructing) 3개의 변수들로 분배하는 작업입니다. first에는 latte가 들어가고 second에는 americano, ...otherCoffeeMenus라는 변수에는 라떼와 아메리카노를 제외한 Moca와 Tea가 들어가게 됩니다. 다만 나머지 모든 부분을 지칭해주는 ...이 반드시 들어가야 합니다. 이 스프레드 연산자는 객체(object)에도 동일하게 사용됩니다.

 

 

스프레드 연산자는 배열, 객체를 다룰 때 자주 사용되는 부분이니 꼭 참고하시기 바랍니다. 감사합니다.