Book Image

Learn ECMAScript - Second Edition

By : MEHUL MOHAN, Narayan Prusty
Book Image

Learn ECMAScript - Second Edition

By: MEHUL MOHAN, Narayan Prusty

Overview of this book

Learn ECMAScript explores implementation of the latest ECMAScript features to add to your developer toolbox, helping you to progress to an advanced level. Learn to add 1 to a variable andsafely access shared memory data within multiple threads to avoid race conditions. You’ll start the book by building on your existing knowledge of JavaScript, covering performing arithmetic operations, using arrow functions and dealing with closures. Next, you will grasp the most commonly used ECMAScript skills such as reflection, proxies, and classes. Furthermore, you’ll learn modularizing the JS code base, implementing JS on the web and how the modern HTML5 + JS APIs provide power to developers on the web. Finally, you will learn the deeper parts of the language, which include making JavaScript multithreaded with dedicated and shared web workers, memory management, shared memory, and atomics. It doesn’t end here; this book is 100% compatible with ES.Next. By the end of this book, you'll have fully mastered all the features of ECMAScript!
Table of Contents (18 chapters)
Title Page
PacktPub.com
Contributors
Preface
Index

The spread operator


A spread operator is represented by the ... token. A spread operator splits an iterable object into its individual values.

Note

An iterable is an object that contains a group of values and implements the ES6 iterable protocol to let us iterate through its values. An array is an example of a built-in iterable object.

A spread operator can be placed wherever multiple function arguments or multiple elements (for array literals) are expected in code.

The spread operator is commonly used to spread the values of an iterable object into the arguments of a function. Let's take the example of an array and see how to split it into the arguments of a function.

To provide the values of an array as a function argument, you can use the apply()method of Function. This method is available to every function. The following example demonstrates:

function myFunction(a, b) {
 return a + b;
}
var data = [1, 4];
var result = myFunction.apply(null, data);
console.log(result); //Output "5"

Here, the apply method takes an array, extracts the values, passes them as individual arguments to the function, and then calls it.

Here's an example using the modern way, that is, with the spread operator:

function myFunction(a, b) {
    return a + b; 
}
let data = [1, 4];
let result = myFunction(...data);
console.log(result); //Output "5"

During runtime, before the JavaScript interpreter calls the myFunction function, it replaces ...data with the 1,4 expression:

let result = myFunction(...data);

The previous code is replaced with:

let result = myFunction(1,4);

After this, the function is called.

Other uses of the spread operator

The spread operator is not just limited to spreading an iterable object into function arguments, but it can be used wherever multiple elements (for example, array literals) are expected in code. So it has many uses. Let's see some other use cases of the spread operator for arrays.

Making array values a part of another array

The spread operator can also be used to make array values a part of another array. The following example code that demonstrates how to make the values of an existing array a part of another array while creating it:

let array1 = [2,3,4];
let array2 = [1, ...array1, 5, 6, 7];
console.log(array2); //Output "1, 2, 3, 4, 5, 6, 7"

Consider the following code:

 let array2 = [1, ...array1, 5, 6, 7];

This previous code is equivalent to:

 let array2 = [1, 2, 3, 4, 5, 6, 7];

Pushing the values of an array into another array

Sometimes, we may need to push the values of an existing array into the end of another existing array. This is how programmers used to do it:

var array1 = [2,3,4];
var array2 = [1];
Array.prototype.push.apply(array2, array1);
console.log(array2); //Output "1, 2, 3, 4"

But from ES6 onward we have a much cleaner way to do it, which is as follows:

let array1 = [2,3,4];
let array2 = [1];
array2.push(...array1);
console.log(array2); //Output "1, 2, 3, 4"

Here the push method takes a series of variables and adds them to the end of the array on which it is called. See the following line:

array2.push(...array1);

This will be replaced with the following line:

array2.push(2, 3, 4);

Spreading multiple arrays

Multiple arrays can be spread on a single-line expression. For example, take the following code:

let array1 = [1];
let array2 = [2];
let array3 = [...array1, ...array2, ...[3, 4]];//multi arrayspread
let array4 = [5];
function myFunction(a, b, c, d, e) {
  return a+b+c+d+e;
}
let result = myFunction(...array3, ...array4); //multi array spread
console.log(result); //Output "15"