Javascript spread operator && rest operator

Spread Operator 에 대해 알아보자.

스프레드 연산자를 이용하면 문자열, 배열, 객체등 반복가능한 객체(iterable object)를 개별요소로 분리 할 수 있다.

1 2 3 4

const arr = [3, 4, 5];   const newArr = [1, 2, ...arr]; console.log(newArr); //[1,2,3,4,5]

cs

arr 앞에 붙어 있는 ... 이 스프레드 연산자이며 배열의 개별 요소 3,4,5 를 분리하여 값으로 가져 왔다.

모든 경우에 스프레드 연산자를 사용할 수 있는 건 아니다. 컴마로 분리되는 값들을 사용 할 수 있는 곳에서만 사용 가능하다. 함수 안에 인자로 던져 주거나 새로운 배열을 만드는 방식으로 사용 할 수 있다.

스프레드 연산자를 이용하면 배열의 복사 그리고 배열의 결합을 손쉽게 할 수 있다. 이때 배열의 복사는 shallow copy 얉은 복사로 객체 안의 객체 값은 복사하지 못하고 공유된다. (javascript this 에서 설명)

1 2 3 4 5 6

//Copy array const mainMenuCopy = [...restaurant.mainMenu];   //Join 2 array const menu = [...restaurant.startMenu, ...mainMenuCopy]; console.log(menu); Colored by Color Scripter

cs

여기서 iterable 에 대한 이야기를 하고 가겠다. iterable object 는 반복 가능한 객체로 

string , array ,map ,set 등에서 사용 가능하다.

iterable object 이라면

for ... of 루프

spread 연산자

destructuring  이 가능하다.

(https://helloworldjavascript.net/pages/260-iteration.html)

객체 또한 스프레드 연산자를 사용해 얉은 복사 그리고 결합이 가능하다.

const newRestaurant = { ...restaurant, ...myself, mouse: 'good!' };

Spread Operator 가 안에 있는 요소를 바깥으로 꺼내는 연산자라면 Rest operator 는 정확히 여러 요소들을 배열로 만드는 spread operator 의 반대 작용 연산자이다.

두 연산자의 모양은 ... 으로 완전히 똑같다. 스프레드 연산자와 같이 배열을 만드는 방식 그리고 함수에서 사용할 수 있다. 그리고 또한 객체에서도 사용 가능하다.

1 2

const arr = [1, 2, 3, 4, 5]; const [a, b, ...others] = arr; //other = [3,4,5]

cs

spread 연산자는 할당 연산자의 우측에 위치한다면 rest 연산자는 할당 연산자의 좌측에 위치해야한다. 그리고 배열의 마지막에 위치해야만 남은 요소를 전부 배열로 묶을 수 있다.

함수에서의 사용 방법에 대해 알아보자. 인자가 컴마로 분리된 여러 값을 가져올 때 사용하면 유용하다. 숫자를 모두 더하는 add 함수를 만들어 보았다.

1 2 3 4 5 6 7 8 9

const add = function (...elements) {   let sum = 0;   for (let i = 0; i < elements.length; i++) {     sum += elements[i];   }   console.log(sum); };   add(1, 2, 3, 4, 5); //15

cs

매개변수에 ...elements rest operator 를 사용하여 컴마로 분리된 여러 값들을 받아 줄 수 있다.