Updated March 29, 2023
Introduction to Es6 Spread Operator
Es6 spread operator allows an iterable to expand where there are more than zero arguments expected. Basically, It is made by using three dots; it will grant us access to an array of parameters. This operator is debuted in JavaScript; it will decompose the array into separate elements. This operator is also used to expand the array in areas where there should be zero or more elements. This operator divides an array into its constituent elements; spread operator is newly introduced in the javascript operator.
What is the ES6 Spread Operator?
Below is the syntax of the es6 spread operator is as follows. The syntax of the spread operator is different from another es6 operator.
Var name_of_variable = […value]Below is the parameter description syntax of the es6 spread operator.
- Var – At the time of declaring any es6 variable, we need to put var keyword before any variable.
- Name of variable – This is nothing but the variable name which was used at the time of declaring the spread operator variable.
- Value – As shown in the above syntax, it is targeting full values in a variable. Therefore, the value of the es6 spread operator is represented in three dots (…).
This operator consists of three dots. This operator allows us to get parameters from an array. This operator has unpacked the elements. Using this operator, we have to perform the below operation on the array variable are as follows.
- Concatenating an array.
- Copying an array.
- Clone array by using es6 spread operator.
- Spread element with a single element.
- At the time of the function call, spread the elements.
We are using the es6 spread operator to concatenate the array. We can concatenate two arrays by using the spread operator. We can also copy array elements by using it. At the time of using …arr in a function call, the iterable object arr is ‘expanded’ in a list of arguments. In this, the rest parameters is added into JavaScript. It is a feature of JavaScript which was introduced with ES6, and it allows us to access the inner workings of an iterable object.
The word iterable object is referring to a set of data types. Object, arrays, strings, and literals are examples of es6 spread operators. What distinguishes them as iterable is the fact that we can repeated them. These JavaScript types can be walked through in a certain order. We effectively access the stuff inside the iterable objects using the es6 spread operator.
How to Use the Es6 Spread Operator?
We can use this operator in javascript by using multiple array conditions. Below all the examples are as follows.
Example #1 – Expand the iterable array
The below example shows that expanding the iterable array is as follows. In the below example, we use the string name as “Es6 spread operator”.
In the below example, we can see that only the spread word will be expanded because we have used “…” dots before this keyword. We have not used dots before es6 and operator keyword, so this keyword output is not changed.
Code –
var output = ["Es6", ..."spread", "operator"];
console.log(output);
Example #2 – Copying array
The example below shows that copying an array by using spread operators is as follows. We are using colors to copy the array. We use the color name as black, red, and green.
Code –
let col = ['Black', 'Red', 'Green'];
let newCol = [...col];
console.log (newCol);
Example #3 – Concatenating array
The below example shows concatenating an array by using spread operator are as follows. We are using colors to concatenate the array. We use color names as black, white, orange, purple, and green.
In the below example, we can see that two arrays are concatenated into a single array. The first array contains variable name as col and the second array contains the variable name as newCol.
Code –
let col = ['Green', 'Black'];
let newCol = [...col, 'White', 'Orange', 'Purple'];
console.log (newCol);
Example #4 – Constructing array literal
The example below shows that constructing an array literal by using a spread operator is as follows. First, we use colors to construct the array literally by using the spread operator.
In the below example, we can see that two arrays will be initialized into a single array. This is because when constructing an array literal, it allows us to insert the second array into an initialized array.
Code –
let col = ['Green', 'Black'];
let newCol = [...col, 'White', 'Orange', 'Purple'];
console.log (newCol);
Example #5 – Math function to find max value
The below example shows the math function to find max value by using spread operator are as follows. We are using numbers to use math functions by using the spread operator.
In the below example, we are using a max function to find the largest value from the number array.
Code –
const num = [32, 76, 43, 87, 67]
console.log (Math.max (...num))
Example #6 – Math function to find min value
The below example shows the math function to find the min value by using the spread operator are as follows. We are using numbers to use math functions.
In the below example, we use the min function to find the smallest value from the number array.
Code –F
const num = [32, 76, 43, 87, 67]
console.log (Math.min (...num))
Example #7 – Display value of a variable
The below example shows the display value of variables by using the spread operator are as follows. We are using P and Q variables to display it using the spread operator.
Code –
var P = 20;
var Q = -P;
console.log("Value of P is = " +P);
console.log("Value of Q is = " +Q);
Conclusion
In the ES6 spread operator, the rest parameters is added into JavaScript. It is allowing an iterable to expand where there are more than zero arguments expected. Basically, It is made by using three dots, it will grant us access to an array of parameters.
Recommended Articles
This is a guide to ES6 Spread Operator. Here we discuss how to use ES6 Spread Operator and Examples along with the codes and outputs. You may also have a look at the following articles to learn more –
