Understanding the 'three dot' operator better.

#javascript #beginners #webdev

A simple yet powerful operator.

When you look at most of the common web-related programming languages they all have the basic operators, which almost every developer out there knows how to use them. But there are some operators that aren't much common and not every language has them or if they do, they might not share the same syntax. But for newcomers into a language, trying to read other's code and not having the tools required to understand concepts between technologies, it might be a problem. So in this article, I'm going to talk about one most Javascript's underrated and infamous "spread" operator a.k.a the three dot (...) operator. Come! Let's start exploring!

Spread Operator

Javascript has seen massive improvements in its syntax and functionality over the the past few years with the addition of a bunch of new features. Spread is the one among the most useful ones and also the simplest way to go if you want to update a piece of data in an object while creating a new object. Its a very powerful piece of syntax which has a lot of applications in programming.
For now, its hard to keep a track of them all. So lets dig into some of the most common use cases of the spread operator.

Making a copy of an array

Lets understand this with a small example.
Who are your favourite cricketers?
Mine? Its Dhoni and Raina, obviously.
Okay. Lets take this in an array.

let favourites = ["Dhoni","Raina"]
let copy = [...favourites]
console.log(copy);
// ["Dhoni","Raina" ]

If you look at in a different way, the spread operator is selecting each individual element inside the favourite array and placing each of those elements in a new array structure, which is something like spreading. Now you might think what happens if there's no spread operator.

let favourites = ["Dhoni","Raina"]
let copy = [favourites]
console.log(copy);
//  [["Dhoni","Raina" ]]

This ones different because we are getting a multidimensional array (an array inside an array).

Expanding an array

Building on the previous example, lets say I want a new player to be in my favourites list. The Spread operator provides a simple and effective way to do this.

let favourites = ["Dhoni","Raina"]
console.log(...favourites,"Smith");
//  Dhoni Raina Smith

As simple as that. Here we don't get an array since we aren't asking for an array structure unlike we did in the previous case. So this way you could update your data without actually overwriting to your existing data.

String Spreading

The spread operator also works with string spreading. One practical example is extracting characters from a string.

const player = 'Sachin';

//Spread Operator extracts the characters from the String and assigns to an array
const characters = [...player];

console.log(characters); 
//Output -> Array (6) ["S", "a", "c", "h","i","n"]

Merging Objects

Merging of objects is almost similar to merging arrays except for some key-value conditions.
If you have unique key the key-value get added to the new object. If the key is same, the value gets replaced with the new value.

const match1 = 
{ 
  name : "Sachin", 
  score : 56 
};


const match2 = 
{ 
    name : "Sachin", 
    score: 53,
    balls: 32 
};



const match = {...match1, ...match2};
console.log(match) ;
 // Output -> 
             {  name: "Sachin",
                score: 53,
                balls: 32
             };

So that's all for this article. Apart from these, spread syntax has a lot of other applications. Enjoy trying it out and accept these new tools the language is giving you. Hope you loved the article, do let me know your feedback in the comment section below.

For a whole lot about spread syntax please refer to MDN Web Docs.

See you in the next one 👋