EDUCBA Logo

EDUCBA

MENUMENU
  • Explore
    • EDUCBA Pro
    • PRO Bundles
    • Featured Skills
    • New & Trending
    • Fresh Entries
    • Finance
    • Data Science
    • Programming and Dev
    • Excel
    • Marketing
    • HR
    • PDP
    • VFX and Design
    • Project Management
    • Exam Prep
    • All Courses
  • Blog
  • Enterprise
  • Free Courses
  • Log in
  • Sign Up
Home Software Development Software Development Tutorials ES6 Tutorial ES6 Spread Operator
 

ES6 Spread Operator

Updated March 29, 2023

ES6 Spread Operator

 

 

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.

Watch our Demo Courses and Videos

Valuation, Hadoop, Excel, Mobile Apps, Web Development & many more.

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);

Es6 Spread Operator Example 1

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);

Es6 Spread Operator Example 2

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);

Es6 Spread Operator Example 3

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);

Es6 Spread Operator Example 4

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))

Math function to find max value Example 5

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))

Math function to find min value Example 6

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);

Es6 Spread Operator Example 7

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 –

  1. What is ES6?
  2. ES6 Features
  3. ES6 Interview Questions
  4. Java Method References

Primary Sidebar

Footer

Follow us!
  • EDUCBA FacebookEDUCBA TwitterEDUCBA LinkedINEDUCBA Instagram
  • EDUCBA YoutubeEDUCBA CourseraEDUCBA Udemy
APPS
EDUCBA Android AppEDUCBA iOS App
Blog
  • Blog
  • Free Tutorials
  • About us
  • Contact us
  • Log in
Courses
  • Enterprise Solutions
  • Free Courses
  • Explore Programs
  • All Courses
  • All in One Bundles
  • Sign up
Email
  • [email protected]

ISO 10004:2018 & ISO 9001:2015 Certified

© 2025 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more

🚀 Limited Time Offer! - ENROLL NOW