Thursday, August 30, 2018

ES6 Spread Operator in javascript | Typescript examples

Javascript Spread Operator

As you all aware Spread operator is newly featured in available in javascript with ES6
Typescript also implemented this feature since versions 2.1 onwards. Before Spread Operator is not there, Function declaration is as follows
Typescript introduced Spread or REST parameters
This operator is used in either functional call arguments or function header with the end of the argument is prefixed with this.
Typescript is a superset of javascript. All the examples and syntax works within Typescript.

Rest Parameter is called when ... is applied to end of function arguments
Spread Operator is called when ... is applied to  function call arguments

Function.prototype.apply example

Function.prototype.apply() method calls a function with object name and given arguments as an array of objects.  here object name is not required and passed as null.
Before Spread Introduced, If we want to call a function, we have to use 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 Spread Operator without calling apply and Now arguments are prefixed with ... as shown below
method(...arguments)

Spread/Rest Operator Array Example

Following is a spread operator Basic example usage.

var arrayExample = [11,21];
arrayExample = [...arrayExample, 31,14];
console.log(arrayExample); // [11, 21, 31, 14]
This is an array example without spread operator. Here mArray is inserted in 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 single array not array inside an array.
var mArray = [8, 6];
var finalArray = [1, 2, ...mArray, 5, 6];
console.log(finalArray); //[1, 2, 8, 6, 5, 6]

SpreadOperator Objects Example

For objects, Spread operator works like Object.assign() method. It copies existing object values into 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

Slice() method of an array in javascript is used to copy an array. We can also Spread operator in place of 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 give the same result. With 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 Math.min function is used which returns 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? String contains group of words. use spread operator to convert string int character array.
var string = "This is spread example";
var characters = [...string];
console.log(characters);  //["T", "h", "i", "s", " ", "i", "s", " ", "s", "p", "r", "e", "a", "d", " ", "e", "x", "a", "m", "p", "l", "e"]

Related article


EmoticonEmoticon