Spread operator and destructing in typescript

This repository showcasing typescript spread operators usages possibilities in different scenarios.

Spread Operator Usages

Copy array

Copying one array of data to another is possible by simply spreading the array to be copied.

Copy Object

One can copy an object in a similar way as a copy of an array by providing an object in object braces.

Copy behavior in case of multilevel objects

The Spread operator only creates a different copy of properties at the first level. Second level onwards reference of properties got assigned in the copied object.

Concat array

One can concatenate an array by spreading the two array side by side while initializing another array

Concatenating Object

Object concatenation is possible in a similar way by spreading two objects inside the object braces while initializing.

Merging object having common properties

If two merged object have common properties then the last object properties values will override the prior object's properties values

Creating function with unlimited parameters

Sometimes we get the requirement of creating a function in which the number of parameters can be specified in advance. Finding maximum value is one example of it. Spread operator helps in defining a method having an unlimited number of arguments. I am going to present an example of a function that finds the maximum number out of provided n numbers.


Destructing is the process of taking the values from an array or object and assigning it to individual variables. Typescript provides destructing mechanism for both the array and objects.

Destructing array

Array values can be destructured by providing names of variables inside the array bracket and assigning an array to it like below

Here as you saw all the variables provided in the sequence get values of the array accordingly. It is possible to have a mismatched number of variables on the left-hand side. In such cases, the number of remaining arrays values will be discarded

Destructing object

Object destructing is also possible in a similar fashion just by replacing the left-hand side array bracket to object brackets. However, the names of variables should be similar to the names of properties. The example is as followed

Thanks for reading!

Front End Developer at IONGroup