[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax [Back]  [Original]

- JavaScript | MDN

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since 2015 10.

0 ( ) ( ) , 0 - .

In this article

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// Expected output: 6

console.log(sum.apply(null, numbers));
// Expected output: 6

:

js
myFunction(...iterableObj);

:

js
[...iterableObj, "4", "five", 6];

(ECMAScript 2018 ):

js
let objClone = { ...obj };

apply()

Function.prototype.apply() .

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

.

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

, .

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

new

new , apply (apply [[Call]] [[Construct]] ) . , new .

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

new , .

js
function applyAndNew(constructor, args) {
  function partial() {
    return constructor.apply(this, args);
  }
  if (typeof constructor.prototype === "object") {
    partial.prototype = Object.create(constructor.prototype);
  }
  return partial;
}

function myConstructor() {
  console.log("arguments.length: " + arguments.length);
  console.log(arguments);
  this.prop1 = "val1";
  this.prop2 = "val2";
}

var myArguments = ["hi", "how", "are", "you", "mr", null];
var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);

console.log(new myConstructorWithArguments());
// (internal log of myConstructor):           arguments.length: 6
// (internal log of myConstructor):           ["hi", "how", "are", "you", "mr", null]
// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}

, , push(), splice(), concat() . .

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

spread , ... .

js
var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice()  
arr2.push(4);

// arr2  [1, 2, 3, 4]  
// arr      

: Spread 1 . , . (Object.assign() )

js
var a = [[1], [2], [3]];
var b = [...a];
b.shift().shift(); // 1
//   a   : [[], [2], [3]]

Array.prototype.concat() . , .

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

.

js
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; // arr1   [0, 1, 2, 3, 4, 5]

Array.prototype.unshift() . , .

js
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// arr2    arr1   
Array.prototype.unshift.apply(arr1, arr2); // arr1   [3, 4, 5, 0, 1, 2]  

, .

js
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1]; // arr1   [3, 4, 5, 0, 1, 2]  

: unshift() , arr1 .

ECMAScript Rest/Spread (stage 4) . .

(prototype ) Object.assign() .

js
var obj1 = { foo: "bar", x: 42 };
var obj2 = { foo: "baz", y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

Object.assign() setters .

Object.assign() .

js
var obj1 = { foo: "bar", x: 42 };
var obj2 = { foo: "baz", y: 13 };
const merge = (...objects) => ({ ...objects });

var mergedObj = merge(obj1, obj2);
// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } }

var mergedObj = merge({}, obj1, obj2);
// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }

, . , .

(spread ) iterable .

js
var obj = { key1: "value1" };
var array = [...obj]; // TypeError: obj is not iterable

Spread

spread , JavaScript . apply() .

()

, . , . '' , '' . .

Specification
ECMAScript 2027 LanguageSpecification
# prod-SpreadElement
ECMAScript 2027 LanguageSpecification
# prod-ArgumentList
ECMAScript 2027 LanguageSpecification
# prod-PropertyDefinition


Web Proxy Viewer  |  New URL  |  Original Page