ES6 Spread Operator in javascript

As you’re all aware, the Spread operator is a newly featured addition to JavaScript with ES6. TypeScript also implemented this feature starting from version 2.1 onwards, introducing Spread or REST parameters.

This operator is used in functional call arguments or in the function header, with the argument’s end prefixed with it. TypeScript, being a superset of JavaScript, allows all the examples and syntax to function within its environment.

The Rest Parameter is invoked when ... is applied to the end of function arguments, while the Spread Operator is called upon when ... is applied to function call arguments.

Before the Spread Operator’s introduction, a function declaration appeared as follows:

Function.prototype.apply Example

The Function.prototype.apply() method calls a function with the object name and given arguments as an array of objects. Here, the object name is not required and passed as null.

Before the introduction of the Spread Operator, if we wanted to call a function, we had to use the apply() method of a Function object.

function method(p, q, r) {
  console.log(p, q, r);
}
//function calling with given arguments
method.apply(null, [1, 2, 3]); //1 2 3
method.apply(null, [1, 2]); // 1 2 undefined
method.apply(null, [1, , 2]); // 1 undefined 2
method.apply(null, [1]); // 1 undefined undefined
method.apply(null, null); // undefined undefined undefined

In this example, the function has three arguments, but these are not compulsory. The same code can be simplified using the Spread Operator without calling apply, and now arguments are prefixed with ..., as shown below.

method(...arguments);

Spread/Rest Operator Array Example

Here is a basic example of spread operator usage with arrays.

var arrayExample = [11, 21];
arrayExample = [...arrayExample, 31, 14];
console.log(arrayExample); // [11, 21, 31, 14]

Without using the spread operator, mArray is inserted into finalArray as a separate array.

var mArray = [8, 6];
var finalArray = [1, 2, mArray, 5, 6];
console.log(finalArray); // [1, 2, [8,6], 5, 6]

With spread usage, this gives a single array instead of an array inside an array.

var mArray = [8, 6];
var finalArray = [1, 2, ...mArray, 5, 6];
console.log(finalArray); //[1, 2, 8, 6, 5, 6]

Spread Operator Objects Example

For objects, the Spread operator works like the Object.assign() method. It copies existing object values into a new object.

const object = { k1: "v1", k2: "v2" };
const object1 = { k3: "v3", ...object };
console.log(object); //{k1: "v1", k2: "v2"}
console.log(object1); //{k3: "v3", k1: "v1", k2: "v2"}

Array Slice Alternative Example

The slice() method of an array in JavaScript is used to copy an array. We can also use the Spread Operator in place of the slice() method.

Here is an example.

var arr = [1, 2, 3];
var arr1 = arr.slice();
var arr2 = [...arr];
arr2.push(4);
arr1.push(5);
console.log(arr); //[1, 2, 3]
console.log(arr1); //[1, 2, 3, 5]
console.log(arr2); // [1, 2, 3, 4]

Append Arrays using concat and Spread operator

Both methods give the same result. With the spread operator, each array is expanded to copy set values in the new array.

var array1 = ["1", "2", "3"];
var array2 = ["4", "5", "6"];
concarray = array1.concat(array2);
spreadarray = [...array1, ...array2];
console.log(concarray); //["1", "2", "3", "4", "5", "6"]
console.log(spreadarray); //["1", "2", "3", "4", "5", "6"]

Math Functions Spread Operator Example

This operator can be used with Math functions.

Here, the Math.min function is used, which returns the minimum element of an array.

var array1 = [189, 21, 300];
var array2 = [100, 3, 4];
console.log(Math.min(189, 21, 300)); // 21
console.log(Math.min(100, 3, 4)); // 3
console.log(Math.min(...array1)); // 21
console.log(Math.min(...array2)); // 3

How to Convert String into Array? The string contains a group of words. Use the spread operator to convert a string into a character array.

var string = "This is a spread example";
var characters = [...string];
console.log(characters); //["T", "h", "i", "s", " ", "i", "s", " ", "a", " ", "s", "p", "r", "e", "a", "d", " ", "e", "x", "a", "m", "p", "l", "e"]

You can also check other posts on Javascript Add,Delete from Array

ES6 Spread Operator in javascript | Typescript examples

#Function.prototype.apply Example

#Spread/Rest Operator Array Example

#Spread Operator Objects Example

#Array Slice Alternative Example

#Append Arrays using concat and Spread operator