What’s the Spread Operator in Javascript and How to Use it

What’s the Spread Operator in Javascript and How to Use it:

 

https://ift.tt/2UgvLrq

In this short tutorial, you will learn Spread Operators in JavaScript and how to use them.

ES6 introduced new features in JavaScript. One of the famous of them is the spread operator.
You can recognize when you see three dots in your code “...”.

The spread operator is useful to extract elements from an iterable object.

Use-cases

I listed five common use-cases with the spread operator in JavaScript ES6.
These examples will simplify your code and help you understand why you should use spread operators.

Create a new array / Copy an array

const girlNames = ["Jessica", "Emma", "Amandine"];

// The spread operator takes:
// - "Jessica"
// - "Emma"
// - "Amandine"
// and extracts them
// to a new array
const newGirlNames = [...girlNames];

console.log(newGirlNames);
// Output: ["Jessica", "Emma", "Amandine"]

Enter fullscreen mode Exit fullscreen mode

In the above example, we have an array girlNames, and we create a new array using the spread operator.

The spread operator will go through all the array values (“Jessica”, “Emma”, “Amandine”) and extract them inside of the newGirlNames array.

Create a new object

const user = {
  firstName: "John",
  lastName: "D",
  age: 25,
};

// The spread operator takes
// all the properties of the
// object:
// - firstName
// - lastName
// - age
// and extracts them to a new object
const newUser = { ...user };

console.log(newUser);
// Output: {
// firstName: "John",
// lastName: "D",
// age: 25,
//};

Enter fullscreen mode Exit fullscreen mode

This example will follow the logic of the previous one.
We have an object user, and create a new object using the spread operator.

The spread operator will go through all the object’s properties (firstName, lastName, and age) and extract them inside the newUser object.

Merge objects

const user = {
  firstName: "John",
  lastName: "D",
  age: 25,
};

const userJob = {
  jobName: "Developer"
}

const completeUser = { ...user, ...userJob };

console.log(completeUser);
// Output: {
// firstName: "John",
// lastName: "D",
// age: 25,
// jobName: "Developer"
//};

Enter fullscreen mode Exit fullscreen mode

Thanks to the spread operator, merging objects is less complicated.

You can merge objects infinitely. You can try it by yourself! Create a new userFamily object with a wifeName property and merge it to completeUser.

Note: Be careful of using unique keys in your object. If you merge two objects with the same key, only the last merged key will last.

Merge arrays

const girlNames = ["Jessica", "Emma", "Amandine"];
const boyNames = ["John", "Terry", "Alexandre"];

const namesWithSpreadSyntax = [...girlNames, ...boyNames];

console.log(namesWithSpreadSyntax);
// Output: ['Jessica', 'Emma', 'Amandine', 'John', 'Terry', 'Alexandre']

Enter fullscreen mode Exit fullscreen mode

Now you know how to merge objects; you can merge arrays in JavaScript.

String to array

As explained at the beginning of this tutorial, you can spread all iterable objects.
In this last use-case, you will split a string to array in javascript!

const helloWorld = "Hello world!";

const helloArray = [...helloWorld];

console.log(helloArray);
// Output: ["H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

Enter fullscreen mode Exit fullscreen mode

Using the spread operator, you go through all the characters and extract them in an array.
The final result is an array of characters.

Conclusion

Thank you for reading this article on spread operators in JavaScript!

https://ift.tt/2UgvLrq

from Tumblr https://generouspiratequeen.tumblr.com/post/632414418703089664