AppDividend
Latest Code Tutorials

Javascript Spread Operator Example | ES6 Tutorial

0

Javascript Spread Operator Example | ES6 Tutorial is today’s topic. The Spread Operator allows splitting an array to single arguments which are passed to the function as separate arguments. The spread operator takes either an array or an object and expands it into its set of items. The spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments or elements are expected, or an object expression to be expanded in areas where zero or more key-value pairs are expected.

Javascript Spread Operator Example

The syntax for Spread Operator depends on the context you are working on. Let us see the following example.

For array literals or strings the syntax is following.

[...iterableObject, 19, 20, 21];

For object literals which are new in ECMAScript 2018, the syntax is following.

let obj = { ...object };

For function calls, the syntax is following.

myFunction(...iterableObject);

Let us see the following example.

// app.js

const array = [1, 2];
const combined = [...array, 3, 4];
console.log(combined);

In the above example, we have defined one array which has two items. Then we have defined the second array in which we have items like …array. It means, we have included the first defined array. This (…) syntax is called spread syntax.

See the output below.

 

Javascript Spread Operator Example | ES6 Tutorial

The spread operator lets you drop an array in and get its values.

We have not modified an original array, meaning other parts of our code can call that array without fear of side effects.

Spread Operators for Objects

For Javascript objects that spread syntax allows you to do the equivalent of Object.assign, copying the values of an object into a new one. Looking at a simple code example.

// app.js

const obj = {
	name: 'AppDividend',
	author: 'Krunal Lathiya'
};
const combined = {
	...obj,
	age: 25
};
console.log(combined);

Here, we have done the same thing as we have done with arrays. The output is expected to be the same.

 

Spread Operators for Objects

Spread Operators For Functions

Let’s see the example where we use the spread operators as an argument of the function.

// app.js

const multiplication = (x, y, z) => {
	return x * y * z;
};

const args = [1, 2, 3];
const output = multiplication(...args);
console.log(output);

Here, we have passed the formal argument in the form of spread syntax, and actual arguments become the individual elements and return the multiplication of the numbers.

 

Spread Operators For Functions

Any argument in the function argument list can use the spread syntax, and it can be used multiple times as well.

Spread Operator Only for iterables

We can only use Spread Syntax with the iterables. Let’s see the following example and see if we can use with un-iterable objects.

// app.js

const obj2 = {'name': 'Ankit'};
const ob3 = [...obj2];
console.log(ob3);

Now, see the below output.

 

Spread Operator Only for iterables

We get an error. So keep in mind that use the spread operator with the iterable object.

When using the spread syntax for function calls, you need to care about the possibility of exceeding the JavaScript engine’s argument length limit.

Finally, Javascript Spread Operator Example | ES6 Tutorial is over.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.