The Spread Operator in JavaScript is a new addition to a set of operators. Spread Operator allows to take an iterable like an array and expand its elements into single individual items.
The Spread Operator is commonly used to create shallow copies of JavaScript objects. It is defined as three dots before the iterate-like ‘…array’. When ‘…’ occurs in a function call, it is known as the Spread Operator.
In this article, we will learn how to use Spread Operator in JavaScript.
You can learn better with the help of example code snippets and outputs.
Table of Contents
Syntax:
let spread_array = […original_array] EXAMPLE # 01
let original_array = [‘a’, ‘b’, ‘c’]
let spread_array = […original_array] Above example shows that where original_array is [‘a’, ‘b’, ‘c’] and spread_array = […original_array] it means …original_array is equals to ‘a’, ‘b’, ‘c’.
…original_array = ‘a’, ‘b’, ‘c’ Let’s execute the Spread Operator example and see what will we get in result.
EXAMPLE # 02
let original_array = ["a", "b", "c"]
let spread_array = [...original_array]
console.log("Original Array: ")
console.log(original_array)
console.log("Array after Spread Operator: ")
console.log(spread_array)
console.log("Spread Array Value: ")
console.log(...original_array)
Output
1. Array Concatenation
Array concatenation can be done using concat() method to combine or merge two or more arrays together.
Syntax:
array1.concat(array2) EXAMPLE# 01
let array1 = ["a", "b", "c"]
let array2 = [1, 2, 3]
array = array1.concat(array2)
console.log("Array1: ")
console.log(array1)
console.log("Array2: ")
console.log(array2)
console.log("Array after Concatenation using concat() method: ")
console.log(array) Output
JavaScript’s built-in method to concatenate two or more arrays, but we can also use spread operator. So, let’s see an example.
EXAMPLE# 02
let array1 = ["a", "b", "c"]
let array2 = [1, 2, 3]
array = [...array1, ...array2]
console.log("Array1: ")
console.log(array1)
console.log("Array2: ")
console.log(array2)
console.log("Array after Concatenation Using Spread Operator: ")
console.log(array) Output
2. Making a Copy of an Array:
The process of copying all the items of an array into another array can be performed as below.
EXAMPLE# 01
let array1 = ["a", "b", "c"]
let array2 = array1
console.log("Original Array: ")
console.log(array1)
console.log("Copied Array: ")
console.log(array2) Output
Apart from the above example we can also make copy of an array with spread operator.
EXAMPLE# 02
let array1 = ["a", "b", "c"]
let array2 = [...array1]
console.log("Original Array: ")
console.log(array1)
console.log("Copied Array using spread operator: ")
console.log(array2) Output
3. Math Object
The math object in JavaScript has many properties to apply different operations on numbers. Finding minimum, maximum, and so on.
EXAMPLE# 01
console.log("Minimum Number in Numbers (3, 7, -2, 0) is: ")
console.log(+ Math.min(3, 7, -2, 0)) Output
It was a simple way to find a minimum number with the Math object in JavaScript. What if we want to find the minimum number of an array in this simple way? Let’s see:
EXAMPLE# 02
let arr_num = [3, 7, -2, 0]
console.log("Minimum Number in Numbers of an array (3, 7, -2, 0) is: ")
console.log(+ Math.min(arr_num)) Output
So, we can see that it is returning us NaN means not a number because using this simple way, we cannot apply the Math object’s method min() on an array directly. Now, what can we do to perform this operation on an array? We can perform this operation on an array with the help of a spread operator.
EXAMPLE# 03
let arr_num = [3, 7, -2, 0]
console.log("Minimum Number in Numbers of an array (3, 7, -2, 0) using spread operator is: ")
console.log(+ Math.min(...arr_num)) Output
Here, we got our desire output by the use of Spread Operator.
Conclusion
We have discussed the Spread Operator in JavaScript. Users use this operator to make a copy of an array or its items. We saw many situations where we stuck for operations with simple or built-in methods. But with the Spread Operator, we are getting the desired result.
See also: JavaScript Array Unshift() Method
