Spread Operator

Spread Operator
myFunction ( a , ... iterableObj , b )
[ 1 , ... iterableObj , '4' , 'five' , 6 ]
{ ... obj , key : 'value' }

const obj = { key1 : 'value1' } ;
const array = [ ... obj ] ; // TypeError: obj is not iterable

const array = [ 1 , 2 , 3 ] ;
const obj = { ... array } ; // { 0: 1, 1: 2, 2: 3 }

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

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

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

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

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

const arr = [ 1 , 2 , 3 ] ;
const arr2 = [ ... arr ] ; // like arr.slice()

arr2 . push ( 4 ) ;
// arr2 becomes [1, 2, 3, 4]
// arr remains unaffected

const a = [ [ 1 ] , [ 2 ] , [ 3 ] ] ;
const b = [ ... a ] ;

b . shift ( ) . shift ( ) ;
// 1

// Oh no! Now array 'a' is affected as well:
a
// [[], [2], [3]]

let arr1 = [ 0 , 1 , 2 ] ;
const arr2 = [ 3 , 4 , 5 ] ;

// Append all items from arr2 onto arr1
arr1 = arr1 . concat ( arr2 ) ;

let arr1 = [ 0 , 1 , 2 ] ;
const arr2 = [ 3 , 4 , 5 ] ;

arr1 = [ ... arr1 , ... arr2 ] ;
// arr1 is now [0, 1, 2, 3, 4, 5]

const arr1 = [ 0 , 1 , 2 ] ;
const arr2 = [ 3 , 4 , 5 ] ;

// Prepend all items from arr2 onto arr1
Array . prototype . unshift . apply ( arr1 , arr2 ) ;

// arr1 is now [3, 4, 5, 0, 1, 2]

let arr1 = [ 0 , 1 , 2 ] ;
const arr2 = [ 3 , 4 , 5 ] ;

arr1 = [ ... arr2 , ... arr1 ] ;
// arr1 is now [3, 4, 5, 0, 1, 2]

const obj1 = { foo : 'bar' , x : 42 } ;
const obj2 = { foo : 'baz' , y : 13 } ;

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

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

const obj1 = { foo : 'bar' , x : 42 } ;
Object . assign ( obj1 , { x : 1337 } ) ;
console . log ( obj1 ) ; // Object { foo: "bar", x: 1337 }

const objectAssign = Object . assign ( { set foo ( val ) { console . log ( val ) ; } } , { foo : 1 } ) ;
// Logs "1"; objectAssign.foo is still the original setter

const spread = { set foo ( val ) { console . log ( val ) ; } , ... { foo : 1 } } ;
// Nothing is logged; spread.foo is 1

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

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

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

const obj1 = { foo : 'bar' , x : 42 } ;
const obj2 = { foo : 'baz' , y : 13 } ;
const merge = ( ... objects ) => objects . reduce ( ( acc , cur ) => ( { ... acc , ... cur } ) ) ;

const mergedObj1 = merge ( obj1 , obj2 ) ;
// Object { foo: 'baz', x: 42, y: 13 }

Web technology reference for developers
Code used to describe document style
Protocol for transmitting web resources
Interfaces for building web applications
Developing extensions for web browsers
Web technology reference for developers
Learn to structure web content with HTML
Learn to run scripts in the browser
Learn to make the web accessible to all
Frequently asked questions about MDN Plus
Spread syntax ( ... ) allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. In an object literal, the spread syntax enumerates the properties of an object and adds the key-value pairs to the object being created.
Spread syntax looks exactly like rest syntax. In a way, spread syntax is the opposite of rest syntax. Spread syntax "expands" an array into its elements, while rest syntax collects multiple elements and "condenses" them into a single element. See rest parameters and rest property .
Spread syntax can be used when all elements from an object or array need to be included in a new array or object, or should be applied one-by-one in a function call's arguments list. There are three distinct places that accept the spread syntax:
Although the syntax looks the same, they come with slightly different semantics.
Only iterable objects, like Array , can be spread in array and function parameters. Many objects are not iterable, including all plain objects that lack a Symbol.iterator method:
On the other hand, spreading in object literals enumerates the own properties of the object. For typical arrays, all indices are enumerable own properties, so arrays can be spread into objects.
When using spread syntax for function calls, be aware of the possibility of exceeding the JavaScript engine's argument length limit. See Function.prototype.apply() for more details.

It is common to use Function.prototype.apply() in cases where you want to
use the elements of an array as arguments to a function.

With spread syntax the above can be written as:

Any argument in the argument list can use spread syntax, and the spread syntax can be
used multiple times.

When calling a constructor with new , it's not possible to directly use an array and apply() , because apply() calls the target function instead of constructing it, which means, among other things, that new.target will be undefined . However, an array can be easily used with new thanks to spread syntax:

Without spread syntax, to create a new array using an existing array as one part of it,
the array literal syntax is no longer sufficient and imperative code must be used
instead using a combination of push() ,
splice() , concat() , etc. With spread syntax this becomes much more succinct:

Just like spread for argument lists, ... can be used anywhere in the array
literal, and may be used more than once.

Note: Spread syntax effectively goes one level deep while copying an array. Therefore, it may be unsuitable for copying multidimensional arrays. The same is true with Object.assign() — no native operation in JavaScript does a deep clone.

Array.prototype.concat() is often used to concatenate an array to the end
of an existing array. Without spread syntax, this is done as:

Array.prototype.unshift() is often used to insert an array of values at
the start of an existing array. Without spread syntax, this is done as:

Note: Unlike unshift() , this creates a new arr1 , instead of modifying the original arr1 array in-place.
Shallow-cloning (excluding prototype) or merging of objects is possible using a shorter syntax than Object.assign() .
Note that Object.assign() can be used to mutate an object, whereas spread syntax can't.
In addition, Object.assign() triggers setters on the target object, whereas spread syntax does not.
You cannot naively re-implement the Object.assign() function through a single spreading:
In the above example, the spread syntax does not work as one might expect: it spreads an array of arguments into the object literal, due to the rest parameter. Here is an implementation of merge using the spread syntax, whose behavior is similar to Object.assign() , except that it doesn't trigger setters, nor mutates any object:
BCD tables only load in the browser
Last modified: Aug 16, 2022 , by MDN contributors
Your blueprint for a better internet.
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation . Portions of this content are ©1998– 2022 by individual mozilla.org contributors. Content available under a Creative Commons license .

With Spread Operator, allow the expression to expand to multiple arguments, elements, variables, etc.
You can try to run the following code to learn how to work with spread operator −
© Copyright 2022. All Rights Reserved.
We make use of First and third party cookies to improve our user experience. By using this website, you agree with our Cookies Policy.
Agree
Learn more

Was this page helpful?
Yes
No

Performance & security by Cloudflare

You cannot access medium.com. Refresh the page or contact the site owner to request access.
Copy and paste the Ray ID when you contact the site owner.

Ray ID:

74717e7eedc49d75

74717e7eedc49d75 Copy

For help visit Troubleshooting guide

Courses

Tutorials

Examples

Course Index

Explore Programiz

Python
JavaScript
SQL
C
C++
Java
Kotlin
Swift
C#
DSA

Join our newsletter for the latest updates.
Join our newsletter for the latest updates.

Examples

Python Examples
JavaScript Examples
C
Examples
Java Examples
Kotlin Examples
C++ Examples

Company

Change Ad Consent

Do not sell my data
About
Advertising
Privacy Policy
Terms & Conditions
Contact
Blog
Youtube

Apps

Learn Python

Learn C Programming

Learn Java

Get ahead of your peers. Try hands-on coding with Programiz PRO. Claim Discount
In this tutorial, you will learn about JavaScript spread operator with the help of examples.
The spread operator is a new addition to the features available in the JavaScript ES6 version.
The spread operator ... is used to expand or spread an iterable or an array. For example,
You can also use the spread syntax ... to copy the items into a single array. For example,
In JavaScript, objects are assigned by reference and not by values. For example,
Here, both variables arr1 and arr2 are referring to the same array. Hence the change in one variable results in the change in both variables.
However, if you want to copy arrays so that they do not refer to the same array, you can use the spread operator. This way, the change in one array is not reflected in the other. For example,
You can also use the spread operator with object literals. For example,
Here, both obj1 and obj2 properties are added to obj3 using the spread operator.
When the spread operator is used as a parameter, it is known as the rest parameter.
You can also accept multiple arguments in a function call using the rest parameter. For example,
Note : Using the rest parameter will pass the arguments as array elements.
You can also pass multiple arguments to a function using the spread operator. For example,
If you pass multiple arguments using the spread operator, the function takes the required arguments and ignores the rest.
Note : Spread operator was introduced in ES6 . Some browsers may not support the use of spread syntax. Visit JavaScript Spread Operator support to learn more.
JavaScript Destructuring Assignment
© Parewa Labs Pvt. Ltd. All rights reserved.

Take advantage of Back to School SALE on Programiz PRO.

Russia Outdoor
Long Naked
Teen Ass Porn Com

Spread Operator

Report Page