전개 연산자

전개 연산자(spread operator)는 식(expression)이 여러 인수(함수 호출 용)나 여러 요소(배열 리터럴 용) 또는 여러 변수(비구조화 할당 용)가 예상되는 곳에 확장될 수 있도록 합니다.

구문

함수 호출 용:

myFunction(...iterableObj);

배열 리터럴 용:

[...iterableObj, 4, 5, 6]

비구조화(destructuring) 용:

[a, b, ...iterableObj] = [1, 2, 3, 4, 5];

예

더 나은 apply

예: 배열을 함수의 인수로 사용하고 싶은 경우 Function.prototype.apply를 사용하는 것이 보통입니다.

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

ES6 전개 연산자가 있다면 이제 위를 다음과 같이 쓸 수 있습니다:

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

인수 목록의 어떤 인수라도 전개 연산자 구문을 쓸 수 있고 여러 번 사용될 수 있습니다.

function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

더 강력한 배열 리터럴

예: 현재 배열이 있고 이 기존 배열이 그 일부가 되는 새로운 배열을 만들고 싶은 경우, 배열 리터럴 구문은 더는 충분치 않고 push, splice, concat 등의 조합을 사용하는 명령형 코드까지 돌아와야 합니다. 전개 연산자 구문이 있다면 이는 훨씬 더 간결해집니다:

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]

인수 목록의 전개 연산자처럼 ...는 배열 리터럴 내 어디서든 여러 번 사용될 수 있습니다.

new에 적용

예: ES5에서 new를 apply와 함께 사용할 수 없습니다. (ES5에 있어서, apply는 [[Construct]]이 아니라 [[Call]] 합니다.) 물론 ES6에서 전개 연산자 구문이 이를 지원합니다:

var dateFields = readDateFields(database);
var d = new Date(...dateFields);

더 나은 push

예: push는 기존 배열의 끝에 배열을 push하기 위해 자주 사용됩니다. ES5에서 이는 종종 다음과 같이 수행됩니다:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// arr1에 arr2의 모든 항목을 덧붙임
Array.prototype.push.apply(arr1, arr2);

전개 연산자가 있는 ES6에서는 이는 다음과 같이 됩니다:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

iterable에만 적용

var obj = {"key1":"value1"};
function myFunction(x) {
    console.log(x); // undefined
}
myFunction(...obj);
var args = [...obj];
console.log(args, args.length) //[] 0

스펙

브라우저 호환성

참조

• 나머지 매개변수