ES6 Spread Operator in javascript | Typescript examples

As you are all aware Spread operator is newly featured in available in javascript with ES6. Typescript also implemented this feature from version 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 prefixed with this. Typescript is a superset of javascript. All the examples and syntax work within Typescript.

Rest Parameter is called when … is applied to the 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]

It is an array example without a spread operator. 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 a single array not 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]

SpreadOperator Objects Example

For objects, the Spread operator works like the 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 the 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 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 Math.min function is used which returns a 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 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"]

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