Welcome Guest! (App Version 3.1)

websitnero logo name

Spread Operator

Spread Operator

Spread Operator is another new entry in ES6.

Spread Operator is used to copy the contents inside an array or Object. Look at the example below:

arr1 = ['red', 'green', 'blue'];
arr2 = [...arr1, 'orange', 'pink']
console.log(arr2); 

Output: ['red', 'green', 'blue', 'orange', 'pink']

Explaination:Spread Operator (...) copies the content of an array or Object (not the complete array or object as it is, but only the contents inside them). Here in example ...arr1 copies all the content of arr1 and then 'orange' and 'pink' are added to them. So, final array contains 5 items.

Spread Operator with Objects

Just like arrays, spread operator can be used with Objects to copy all the content. Look at the example below:

obj1 = {name: "Peter", age: 29};
obj2 = {...obj1, city: "New York"}
console.log(obj2);

Output: {name: "Peter", age: 29, city: "New York"}

Original Array or Object Unchanged

We all know that unlike Primitive Data Types (string, number, boolean, undefined, null, symbol) - Objects and Arrays keep only a pointer to memory location OR 'Call By Reference'. So, assignment operator just makes the copy of pointer and if you change one of pointer destinations others also change. To understand better look at example below:

arr1 = ['red', 'green', 'blue'];
arr2 = arr1;
arr2.push('yellow');

console.log(arr1, arr2);

Output: arr1 = ['red', 'green', 'blue', 'yellow']; arr2 = ['red', 'green', 'blue', 'yellow'];

Similarly,

obj1 = {name: "Peter", age: 29};
obj2 = obj1;
obj2.city = "New York";

console.log(obj1, obj2);

Output: Obj1 = {name: "Peter", age: 29, city: "New York"} Obj2 = {name: "Peter", age: 29, city: "New York"}

Explaination: Since, arrays and Objects both only contain address of pointer but not exact data, therefore assignment operator only copies the 'pointer' pointing to memory address. If you change whatever is stored at the memory location for one, all pointers will point to same data and hence data has changed for all - in case of 'arrays' and 'objects' due to phenomenon 'Call by Reference'.

Now, Look same examples using Spread (...) Operator:

arr1 = ['red', 'green', 'blue'];
arr2 = [...arr1];
arr2.push('yellow');

console.log(arr1, arr2);

Output: arr1 = ['red', 'green', 'blue']; arr2 = ['red', 'green', 'blue', 'yellow'];

obj1 = {...obj1};
obj2 = obj1;
obj2.city = "New York";

console.log(obj1, obj2);

Output: Obj1 = {name: "Peter", age: 29, city: "New York"} Obj2 = {name: "Peter", age: 29, city: "New York"}

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.