MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

전개 연산자(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에서 newapply와 함께 사용할 수 없습니다. (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개 이상의 요소을 하나의 요소로 모읍니다. 나머지 연산자 이 곳도 참고해보세요.

스펙

스펙 상태 설명
ECMAScript 2015 (6th Edition, ECMA-262) Standard 스펙의 여러 절에 정의됨: Array Initializer, Argument Lists
ECMAScript Latest Draft (ECMA-262) Draft  

브라우저 호환성

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Spread operation in array literals 46 16 (16) Edge No support 7.1
Spread operation in function calls 46 27 (27) Edge No support 7.1
Spread operation in destructuring 49 34 (34) No support ? ?
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Spread operation in array literals No support 46 16.0 (16) No support No support 8 46
Spread operation in function calls No support 46 27.0 (27) No support No support 8 46
Spread operation in destructuring No support No support 34 (34) ? ? ? No support

참조

문서 태그 및 공헌자

 이 페이지의 공헌자: faker007, kdex, Netaras, K._, preco21, ligeek
 최종 변경: faker007,