Learn JavaScript Spread Operator (ES6 Tutorial)

Using the spread operator in JavaScript (ES6) can be helpful in our daily programming lives, so in this video, we are going to talk about the JavaScript Spread Operator, what it does, how to use it with some examples including arrays, objects, and functions.

Sections:
(0:00) - Intro
(0:29) - The Spread Syntax
(01:16) - Merging Arrays with Concat & Spread
(02:25) - String Example with Split Method & Spread
(02:54) - Passing as an argument to Math Function
(04:18) - Merging Objects with Spread Operator
(04:52) - Outro

---

Learn using the spread syntax with JS arrays, objects, and functions

The spread operator in JavaScript has first introduced with ES6 back in 2015 and using it can be helpful in our daily programming lives. In this post, you’re going to learn what the spread operator does, how to use it, and we will use it in some examples together with arrays, objects, and functions.

The Spread Syntax: Three Dots

The spread operator is represented with three dots (…) and is being used to take elements out of something like an array, or an object. By using the spread syntax, we can make some complex operations much easier.

Spread Operator with Arrays

Let’s take this array as an example:

const numbers = [1,2,3,4,5];

console.log(numbers);  // output: [1,2,3,4,5]

Here, when we want to log the elements of the array to the console, we get back the array object itself.

However, if we use the spread operator and put it right before our array:

console.log(...numbers);  // output: 1,2,3,4,5

We’ll see the elements again but this time without the array.

This is just the beginning. With the help of the spread operator, we can make some operations in JavaScript much easier. Let’s go through together with some examples…

Merging Arrays

One good example can be given while merging arrays. Let’s say we want to merge these two arrays below:

const numbers = [1,2,3,4,5];
const moreNumbers = [6,7,8,9,10];

Normally in JavaScript, we had to use the concat() method to merge one or more arrays:

numbers.concat(moreNumbers);

Now instead of this, we can do the same much easier by using the spread operator:

const newArray = [...numbers, ...moreNumbers];

We can merge two or more arrays easily by taking their elements out and assigning them inside a new array, without the help of the concat() method.

Full Article: https://levelup.gitconnected.com/javascript-spread-operator-explained-es6-9784095b0364

#javascript #web-development #es6 #programming #developer