In this tutorial, you will learn about JavaScript spread operator with the assistance of examples.
The spread operator is a new addition to the highlights accessible in the JavaScript ES6 variant.
In this article, you will learn-
What is the spread operator in JavaScript?
The spread operator is a new addition to the arrangement of operators in JavaScript ES6. It takes in an iterable (e.g an array) and expands it into individual components.
The spread operator is usually used to make shallow duplicates of JS objects. Using this operator makes the code concise and improves its readability.
Spread Operator
The spread operator … is used to expand or spread an iterable or an array. For example,
const arrValue = ['My', 'name', 'is', 'Salman']; console.log(arrValue); // ["My", "name", "is", "Salman"] console.log(...arrValue); // My name is Salman
For this situation, the code:
console.log(...arrValue)
is equivalent to:
console.log('My', 'name', 'is', 'Salman');
Copy Array Using Spread Operator
You can likewise use the spread syntax … to copy the items into a single array. For instance,
const arr1 = ['one', 'two']; const arr2 = [...arr1, 'three', 'four', 'five']; console.log(arr2); // Output: // ["one", "two", "three", "four", "five"]
Clone Array Using Spread Operator
In JavaScript, objects are assigned by reference and not by values. For example,
let arr1 = [ 1, 2, 3]; let arr2 = arr1; console.log(arr1); // [1, 2, 3] console.log(arr2); // [1, 2, 3] // append an item to the array arr1.push(4); console.log(arr1); // [1, 2, 3, 4] console.log(arr2); // [1, 2, 3, 4]
Here, the two variables arr1 and arr2 are alluding to a similar array. Consequently the adjustment in one variable outcomes in the change in the two variables.
Notwithstanding, in the event that you need to copy arrays so they don’t allude to a similar array, you can use the spread operator. Along these lines, the adjustment in one exhibit isn’t reflected in the other. For instance,
let arr1 = [ 1, 2, 3]; // copy using spread syntax let arr2 = [...arr1]; console.log(arr1); // [1, 2, 3] console.log(arr2); // [1, 2, 3] // append an item to the array arr1.push(4); console.log(arr1); // [1, 2, 3, 4] console.log(arr2); // [1, 2, 3]
Spread Operator with Object
You can likewise use the spread operator with object literals. For instance,
const obj1 = { x : 1, y : 2 }; const obj2 = { z : 3 }; // add members obj1 and obj2 to obj3 const obj3 = {...obj1, ...obj2}; console.log(obj3); // {x: 1, y: 2, z: 3}
Here, both obj1 and obj2 properties are added to obj3 using the spread operator.
Rest Parameter
At the point when the spread operator is used as a parameter, it is known as the rest parameter.
You can likewise accept various arguments in a function call using the rest parameter. For instance,
let func = function(...args) { console.log(args); } func(3); // [3] func(4, 5, 6); // [4, 5, 6]
Here,
- At the point when a single argument is passed to the func() function, the rest parameter takes just a single parameter.
- At the point when three arguments are passed, the rest parameter takes every one of the three parameters.
Note: Using the rest parameter will pass the arguments as array elements.
You can likewise pass different arguments to a function using the spread operator. For instance,
function sum(x, y ,z) { console.log(x + y + z); } const num1 = [1, 3, 4, 5]; sum(...num1); // 8
In the event that you pass different arguments using the spread operator, the function takes the necessary arguments and ignores the rest.
Note: Spread operator was presented in ES6. A few browsers may not support the use of spread syntax. Visit JavaScript Spread Operator support to learn more.
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.