[ES6] Spread 와 Rest 파라미터 ( ... 연산자)

(이 포스팅은 이전 블로그에서 옮겨왔습니다)

근래 JavaScript를 아주 씐나게 공부하고 있는 와중에, ECMA2015(ES6)에서 추가된 새로운 연산자가 있어 공부해보았다.😛

 

 

Spread Operator

Spread 문법은 ... 연산자를 통해서 사용할 수 있다.

MDN 설명에 의하면,

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.

 

 

 

글만으론 이해가 쉽지않은데 코드를 보면 이해하는데 조금 더 도움이 된다.

var arr = [1];
var items = [2, 3];

arr.push(...items);
console.log(arr);        //Expected Output : [1, 2, 3]

 

 

위 코드에서 arr출력을 보면 items의 요소가 arr에 넣어진 것을 볼 수있다.

이걸 통해 확인할 수 있는 것은 ...연산자를 통해서 items의 요소가 전개되어져 arr에 넣어졌고

 

이것은 곧, 그간 우리가 자주 사용하던 arr.concat()을 대체할 만 하다는 것을 알게되었다!

 

Spread연산자를 처음 본 나.....ㅎㅎ

 

그렇담 이제 Spread문법(이하 전개구문)을 활용한 구문 선언할 수 있는 유형을 알아보자

 

 

함수호출

일반적으로 배열의 요소를 함수의 인자로 사용하려고 할 때,
Function.prototype.apply()를 사용하였는데 '전개구문'을 사용하면 아래와 같이 바뀔수 있다.

 

 function myFunction(x,y,z){ }
 var args = [0, 1, 2];

 //before
 myFunction.apply(null, args);

//after 
myFunction.apply(...args);

 

배열리터럴 과 문자열

전개구문은 기존의 push(), splice(), concat() 등을 조합해서 사용하는 코드를

훨씬 간단하게 만들어줄 수도 있다.

 

1) 배열 복사

var arr1 = [a, b, c];

//before
var arr2 = arr1.splice();    
//after
var arr = [...arr];

 

2) 배열 연결

var arr1 = [1,2,3];
var arr2 = [4,5,6];

//before
arr1 = arr1.concat(arr2);    
//after
arr1 = [...arr1, ...arr2];    

 

객체리터럴

ECMAScript2018에서 추가된 객체 리터럴은 객체가 소유한 열거형 프로퍼티를 새로운 객체로 복사할 수 있다.
얕은 복사(prototype 제외) 또는 객체병합은 Object.assign()대신 ...연산자를 사용한 전개구문으로 이용할 수 있다.

객체리터럴의 예제 코드는 MDN에 설명이 더 상세하니 하단의 링크를 참고하자!

 

Rest parameter

Rest파라미터도 마찬가지로 전개구문(...연산자) 사용할 수 있다.

function print(...param){
  param.forEach((e) => {
    console.log(e);
  }
}

print('apple', 'banana', 'grape');         
/*
apple
banana
grape
*/

---

2. 문서

MDN Documents > 전개 구문