Spread Es6

Spread Es6
[ 'Red', 'Yellow', 'Violet', 'Orange', 'Green' ]

[ 'Red', 'Yellow', 'Violet', 'Orange', 'Green' ]

[ 'Red', 'Yellow', 'Green' ]
[ 'Red', 'Yellow', 'Green' ]

[ 'Red', 'Yellow', 'Green' ]
[ 'Red', 'Yellow' ]

For Videos Join Our Youtube Channel: Join Now

Like/Subscribe us for latest updates or newsletter
ES6 introduced a new operator referred to as a spread operator, which consists of three dots (...). It allows an iterable to expand in places where more than zero arguments are expected. It gives us the privilege to obtain the parameters from an array.
Spread operator syntax is similar to the rest parameter, but it is entirely opposite of it. Let's understand the syntax of the spread operator.
The three dots (...) in the above syntax are the spread operator, which targets the entire values in the particular variable.
Here, we are going to see how we can manipulate an array by using the spread operator.
When we construct an array using the literal form, the spread operator allows us to insert another array within an initialized array.
Spread operator can also be used to concatenate two or more arrays.
If we copy the array elements without using the spread operator, then inserting a new element to the copied array will affect the original array.
But if we are copying the array by using the spread operator, then inserting an element in the copied array will not affect the original array.
Let's see how the spread operator spreads the strings. The illustration for the same is given below.
Here, we have constructed an array str from individual strings.
In the above example, we have applied the spread operator to the string 'EIO' . It spreads out each specific character of the 'EIO' string into individual characters.
We will get the following output after the execution of the above code.
JavaTpoint offers too many high quality services. Mail us on hr@javatpoint.com , to get more information about given services.
JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at hr@javatpoint.com. Duration: 1 week to 2 week
Contact No: 0120-4256464, 9990449935
© Copyright 2011-2021 www.javatpoint.com. All rights reserved. Developed by JavaTpoint.

Come write articles for us and get featured
Learn and code with the best industry experts
Get access to ad-free content, doubt assistance and more!
Come and find your dream job with us
Explain spread operator in ES6 with an Example
Difficulty Level :
Expert Last Updated :
21 Oct, 2021
    let concatenatedArray = array1.concat(array2);
    console.log(concatenatedArray);
    // Using spread (...) operator......
    let newArray = [...array1, ...array2];
    let arr = [ "Apple" , "Mango" , "Banana" ];
    console.log(newArr); // [ 'Apple', 'Mango', 'Banana' ]
    console.log(newArr); // [ 'Apple', 'Mango', 'Banana', 'Grapes' ]
    console.log(arr); // [ 'Apple', 'Mango', 'Banana' ]
    let Array = [5, 6, 8, 1, 0, -8, 10];
    console.log(Math.min(...Array));
Explain the benefits of spread syntax & how it is different from rest syntax in ES6 ?
What is the meaning of spread operator (...) in Reactjs?
What is the rest parameter and spread operator in JavaScript ?
Arrow operator in ES6 of JavaScript
Explain the Generator Function in ES6
Explain sub-classes and inheritance in ES6
What is spread, default and rest parameters in JavaScript ?
Ternary operator vs Null coalescing operator in PHP
Explain the purpose of the ‘in’ operator in JavaScript
Difference between node.js require and ES6 import and export
Advanced JavaScript- Self Paced Course
Data Structures & Algorithms- Self Paced Course
Complete Interview Preparation- Self Paced Course
Improve your Coding Skills with Practice Try It!

A-143, 9th Floor, Sovereign Corporate Tower, Sector-136, Noida, Uttar Pradesh - 201305
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
Privacy Policy

Got It !
In this article, we will try to understand the basic details which are associated with the Spread operator which includes the syntax of the spread operator and its usage with the help of certain examples in ES6.
Let us first understand what is exactly Spread Operator is and what is its syntax and then further we will see some examples associated with its declaration.
Syntax: Following syntax, we may use to implement spread operator with any iterable object like an array.
Basically, what this syntax is doing that is taking the values from an array and thus storing it in a variable which is therefore acting as an array itself.
Now that we have understood the basics of the Spread operator including its syntax, it’s high time to see few examples which are based on the usage of the spread operator.
Example 1: In this example, we will try to perform the concatenation by firstly using the concat() method and then by using the simpler way which is by using the spread operator.
Output: As you can see in the above code snippet that it becomes so simple to perform concatenation by using the spread operator syntax instead of using the predefined method concat().
Example 2: In this example, we will try to copy the values of one array into another array then afterward we will try to add some more values into the new array and then further we will see the changes being impacted on the previous and new array elements.
Output: As you can see in the above example when we normally entered a new value in the new array it doesn’t impact the older array, if we try to do it with the regular method we might get new array elements as same as older array elements.
Example 3: In this example, we will try to find the minimum element in an array of elements using the spread operator.
Output: If we try to find the minimum element using some simpler way then we might experience an error message which says NaN (Not a number), but with the use of a spread operator, we will not be getting any error message like this.
Writing code in comment?
Please use ide.geeksforgeeks.org ,
generate link and share the link here.

JavaScript Training Program (39 Courses, 23 Projects, 4 Quizzes) 39 Online Courses | 23 Hands-on Projects | 225+ Hours | Verifiable Certificate of Completion | Lifetime Access | 4 Quizzes with Solutions 4.5 (9,930 ratings)
Course Price $129 $599 View Course
*Please provide your correct email id. Login details for this Free course will be emailed to you
*Please provide your correct email id. Login details for this Free course will be emailed to you
*Please provide your correct email id. Login details for this Free course will be emailed to you
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.
Below is the syntax of the es6 spread operator is as follows. The syntax of the spread operator is different from another es6 operator.
Web development, programming languages, Software testing & others
Below is the parameter description syntax of the es6 spread operator.
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.
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.
We can use this operator in javascript by using multiple array conditions. Below all the examples are as follows.
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.
var output = ["Es6", ..."spread", "operator"];
console.log(output);
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.
let col = ['Black', 'Red', 'Green'];
let newCol = [...col];
console.log (newCol);
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.
let col = ['Green', 'Black'];
let newCol = [...col, 'White', 'Orange', 'Purple'];
console.log (newCol);
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.
let col = ['Green', 'Black'];
let newCol = [...col, 'White', 'Orange', 'Purple'];
console.log (newCol);
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.
const num = [32, 76, 43, 87, 67]
console.log (Math.max (...num))
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.
const num = [32, 76, 43, 87, 67]
console.log (Math.min (...num))
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.
var P = 20;
var Q = -P;
console.log("Value of P is = " +P);
console.log("Value of Q is = " +Q);
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.
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 –
All in One Software Development Bundle (600+ Courses, 50+ projects)
© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.
By signing up, you agree to our Terms of Use and Privacy Policy .
By signing up, you agree to our Terms of Use and Privacy Policy .
Web development, programming languages, Software testing & others
By signing up, you agree to our Terms of Use and Privacy Policy .
Web development, programming languages, Software testing & others
By signing up, you agree to our Terms of Use and Privacy Policy .
By signing up, you agree to our Terms of Use and Privacy Policy .
This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy
If the names of the variables are the same, which type of variable takes precedence?
Explore 1000+ varieties of Mock tests View more
Special Offer - All in One Software Development Bundle (600+ Courses, 50+ projects) @ USD119 Learn More 0 0 2 1 5 7 4 5

Was this page helpful?
Yes
No

Performance & security by Cloudflare

You cannot access medium.com. Refresh the page or contact the site owner to request access.
Copy and paste the Ray ID when you contact the site owner.

Ray ID:

747236a24b8a1604

747236a24b8a1604 Copy

For help visit Troubleshooting guide

Half Naked
Jav Sleeping Porn
Private Steam

Spread Es6

Report Page