Note ES6+/ES2015+의 생략 부호: 나머지, 펼침, 해체할당 연산자

ES6+에도 생략 부호처럼 생긴 연산자들이 있는데, 해체할당, 펼침, 나머지 연산자라고 한다. 이것은 JSX가 생략 부호를 쓰는 이유이기도 하다.

자바스크립트에서 인자의 수를 제한하지 않고 사용하는 함수를 사용하거나 작성한 적이 있다면 arguments 객체에 대해서 알고 있을 것이다. 이 객체는 함수에 전달된 모든 매개변수를 포함한다. 한 가지 문제는 이 arguments 객체가 실제로 배열이 아니라는 점이다. sort()나 map() 같은 함수를 명시적으로 사용하려면 배열로 변환해야 한다. 예를 들어 아래 request 함수는 call()을 이용해서 arguments 객체를 배열로 변환한다.

function request(url, options, callback) {
  var args = Array.prototype.slice.call(arguments, request.length)
  var url = args[0]
  var callback = args[2]
  // ...
}

무수히 많은 인자에 접근해야 할 경우 인자를 배열처럼 다룰 수 있는 ES6 기능이 있을까? 있다! 생략 부호(...)로 사용하는 나머지 연산자를 사용할 수 있다. 예를 들어 다음 코드는 나머지 연산자를 사용한 ES6 함수다. callbacks는 arguments 객체처럼 유사배열이 되는 것이 아니라 나머지 매개변수를 실제 배열에 담는다.⁵

function (url, options, ...callbacks) {
  var callback1 = callbacks[0]
  var callback2 = callbacks[1]
  // ...
}

여기서 나머지 매개변수는 해체할당될 수도 있는데, 다음과 같이 별개의 변수로 분리하여 추출하는 것을 의미한다.

function (url, options, ...[error, success]) {
  if (!url) return error(new Error('ooops'))
  // ...
  success(data)
}

펼침 연산자는 무엇일까? 간단히 말해 펼침 연산자는 다음 위치에서 인자나 변수를 펼칠 수 있다.

• 함수 호출: 예를 들면 push() 메서드에서 arr1.push(...arr2)처럼 사용한다.

• 배열 리터럴: 예를 들면 array2 = [...array1, x, y, z]처럼 사용한다.

• new 연산자를 이용한 인스턴스 생성 시: 예를 들어 var d = new Date(...dates)

ES5에서 배열을 함수의 인자로 사용하려면 apply() 함수를 사용해야 했다.

function request(url, options, callback) {
  // ...
}
var requestArgs = ['http://azat.co', {...}, function(){...}]
request.apply(null, requestArgs)

ES6에서는 펼침 연산자를 사용할 수 있다. 나머지 연산자처럼 생략 부호(...)를 사용한다.

function request(url, options, callback) {
  // ...
}
var requestArgs = ['http://azat.co', {...}, function(){...}]
request(...requestArgs)

펼침 연산자의 문법은 나머지 연산자와 비슷하다. 그렇지만 나머지 연산자는 함수 정의나 선언 시에 사용하고, 펼침 연산자는 함수 호출이나 리터럴에 사용한다. 추가로 작성해야 하는 명령형 코드를 대체할 수 있으므로 잘 알고 사용해야 할 중요한 기술이다.