| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax | [Back] [Original] |
Get to know MDN better
This page was translated from English by the community. Learn more and join the MDN Web Docs community.
This feature is well established and works across many devices and browser versions. Its been available across browsers since 2015 10.
0 ( ) ( ) , 0 - .
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
:
myFunction(...iterableObj);
:
[...iterableObj, "4", "five", 6];
(ECMAScript 2018 ):
let objClone = { ...obj };
apply() function myFunction(x, y, z) {}
var args = [0, 1, 2];
myFunction.apply(null, args);
.
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]);
new new , apply (apply [[Call]] [[Construct]] ) . , new .
var dateFields = [1970, 0, 1]; // 1 Jan 1970
var d = new Date(...dateFields);
new , .
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() . .
var parts = ["shoulders", "knees"];
var lyrics = ["head", ...parts, "and", "toes"];
// ["head", "shoulders", "knees", "and", "toes"]
spread , ... .
var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice()
arr2.push(4);
// arr2 [1, 2, 3, 4]
// arr
:
Spread 1 . , . (Object.assign() )
var a = [[1], [2], [3]];
var b = [...a];
b.shift().shift(); // 1
// a : [[], [2], [3]]
Array.prototype.concat() . , .
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// arr2 arr1
arr1 = arr1.concat(arr2);
.
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; // arr1 [0, 1, 2, 3, 4, 5]
Array.prototype.unshift() . , .
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]
, .
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() .
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 }
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 .
var obj = { key1: "value1" };
var array = [...obj]; // TypeError: obj is not iterable
spread , JavaScript . apply() .
| Specification |
|---|
| ECMAScript 2027 LanguageSpecification # prod-SpreadElement |
| ECMAScript 2027 LanguageSpecification # prod-ArgumentList |
| ECMAScript 2027 LanguageSpecification # prod-PropertyDefinition |
...')...')This page was last modified on 2026 7 15 by MDN contributors.
Your blueprint for a better internet.
Portions of this content are 19982026 by individual mozilla.org contributors. Content available under a Creative Commons license.
| Web Proxy Viewer | New URL | Original Page |