Spread in JS Way

1

In ES6 , if there is any feature which can be marked as underrated , that has to be Spread Operator often represented by three dots.(…)

It’s importance could be found by such a way that it is impossible to move forward in React or Redux without knowing how spread syntax works.

Spread operator simply spreads or open up the datatype on which spread operator is applied and than can be used as per choice.

So,let’s see some of the most common usage of Spread syntax in JavaScript.

  1. Usage in Array

const arr = [1,2,3,4];

const endArr = [...arr,5]; Result : [1,2,3,4,5]
const startArr = [0,...arr]; Result : [0,1,2,3,4,5]
const bettweenArr = [0,...arr,5]; Result : [0,1,2,3,4,5]`

So, as evident in above example , when we initialize a new variable as an array , and spread an array within it.It opens up the spread ed datatype and merges with the rest of the element.

2.Usage in Object

const obj1 = { language : "Javascript", profile : "Web Developer" }

const obj2 = { language:"Java", profile:"Backend Developer" }

const obj3 = {...obj1,...obj2} Result : { language: 'Java', profile: 'Backend Developer' }

Here , above obj1 and obj2 are merged in a single Object by using spread operator.

Please note whenever we use spread operator to create a new Object a new instance is created.

Please note multiple objects can be merged into a single object using the above assignment and the common properties are overridden by the latest one(rightmost).

For eg -

const obj3 = {...obj1,...obj2,...{language : 'Python'}} Result : { language: 'Python', profile: 'Backend Developer' }

  1. A Common usage

One common usage of spread operator is when we have an input data in the form of array but a function expects the same in the form of string.

For eg => Suppose we want to find maximum among an array of integers .

const arr = [31,13,46,05]

One way to do is by using apply method on max method of Math Object.

console.log(Math.max.apply(null,arr)) Result => 46

However , the same can be implemented by using the spread operator:

console.log(Math.max(...arr)) Result => 46

So, this in nutshell is all about basic usage of ES6 Spread operator.Hope you learned something new today :slight_smile:

Do like it , if it was of any help and do share and …ing :stuck_out_tongue:

3 Likes
2

Wow, that’s a really nice and detailed explanation. But,
I don’t really think the Spread Operator is that underrated. If you actually see a lot of codes that uses Arrays, they will most likely use a spread operator. That’s in my case, I have a web app that uses an array of objects as it’s data, and use the spread operator. People don’t really talk about it, because of how straight forward it is, and easy to understand it is. In the beginner level, you might not see it a lot, but when you get to the professional level, you’re going to see it being used more and more.

Friendly Note: Next time you want to showcase a code, use the ``` backtick so it is easier for everyone to read.
See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (``) will also add backticks around text
The “preformatted text” tool in the editor (</>) will also add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

1 Like
3

Thank you for your detailed explanation. However, I would like to add that I usually see the spread operator in use, perhaps when we first learn Javascript we don’t know about it, but I feel that when you learn about it you start seeing it everywhere :smile: :smile:

2 Likes
4

@Catalactics…Thanks for the note.Actually was my first post ,so was not aware .Post edited accordingly.

1 Like
5

usually just explanations like this don’t get much of a response, to keep everything tidy and keep only posts that promote discussion we usually unlist them. This one seems to be having some success, but, why don’t you try to write for Developer News?

Everything you need to know can be found in the style guide

2 Likes