전개 연산자

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

구문

함수 호출 용:

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);

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

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에 적용하기

예: ES6에서 new를 apply와 함께 사용할 수 없습니다. (ES6에 있어서, apply는 [[Construct]]이 아니라 [[Call]] 합니다.)_{ES5라는 말이 있어서 ES6로 수정했습니다.(정확하지 않으니 확인 후 수정 부탁드리겠습니다.)} 물론 ES2015에서 전개 연산자 구문이 이를 지원합니다:

var dateFields = [1970, 0, 1]; // 1 Jan 1970
var d = new Date(...dateFields);

배열 복사하기

var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice()와 유사하게 복사하기
arr2.push(4); // [1, 2, 3, 4]
// arr는 어떤 영향도 받지 않았다.

더 나은 push

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

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

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

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

나머지 구문(파라미터)

나머지 구문^{rest syntax}는 완벽히, 전개 연산자와 비슷합니다. 하지만, 나머지 구문 배열이나 객체를 비구조화 할당^{destructuring assignment}을 할 때, 사용됩니다. 이런 의미에서 나머지 구문은 전개 연산자와 대조됩니다. 전개 연산자는 배열이나 객체를 확장하지만, 반면에 나머지 구문은 2개 이상의 요소을 하나의 요소로 모읍니다. 나머지 연산자 이 곳도 참고해보세요.

스펙

브라우저 호환성

참조

• 나머지 매개변수