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.

const a = [1, 2, 3, 4];
const b = [...a];
console.log("B (copied from a): ", b);
// Output: B (copied from a):  [ 1, 2, 3, 4 ]

Copy Object

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

const obj1 = {x: 10, y: 20};
    
// Provide the same properties names while destructuring object
const obj2 = {...obj1};
console.log(`Obj2: ${JSON.stringify(obj)}`);

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.

const multiLevelObject = {x: 10, y: {m: 20, n: {b: 30}}};
// Copy first level property only
const clonedMultiLevelObj = {...multiLevelObject};
    
// Since copy is performed at first level, changing 
// clonedMultiLevelObj.x cloned Obj doesn't change the 
// multiLevelObject.x
clonedMultiLevelObj.x = 40;
// Since copy is performed at first level, changing 
// clonedMultiLevelObj.y.m also change the multiLevelObject.y.m 
// as both clonedMultiLevelObj.y and multilevelObject.y is 
// referencing the same object
clonedMultiLevelObj.y.m = 30;
console.log(`Original Object: ${JSON.stringify(multiLevelObject)} 
               Cloned Obj: ${JSON.stringify(clonedMultiLevelObj)}`); 
// Output: Original Object: {"x":10,"y":{"m":30,"n":{"b":30}}} 
// Cloned Obj: {"x":40,"y":{"m":30,"n":{"b":30}}}

Concat array

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

// Concat two array
const a = [0, 1, 2, 3, 4];
const b = [5, 6, 7, 8, 9];
const concat = [...a, ...b];

Concatenating Object

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

const concatObjects = () => {
    const obj1 = {p: 20, q: 30};
    const obj2 = {r: 40, s: 50};
    
    const obj3 = {...obj1, ...obj2}
    console.log(`Merged Object: ${JSON.stringify(obj3)}`);
    // Output Merged Object: {"p":20,"q":30,"r":40,"s":50}
}

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

// Object concatination with common properties
const obj1 = {p: 20, q: 30};
const obj2 = {q: 40, s: 50};
    
const obj3 = {...obj1, ...obj2}
// Last object common properties values will override the prior objects properties values
console.log(`Merged Object: ${JSON.stringify(obj3)}`);
// Output: Merged Object {p: 20, q: 40, s: 50};

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.

// Unlimited parameters
const maximumValue = (...numbers: number[]) => {
  return numbers.reduce((maxValue: number, number: number) => {
     if(maxValue > number) {
        return maxValue;
     }
     return number;
  }, numbers[0]);
} 
console.log(`Maximum value: ${maximumValue(50, 40, 30, 100, 60)}`)
// Output: Maximum value: 100

Destructing

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

const a = [1, 2, 3, 4];
const [one, two, three, four] = a;
console.log(`${one} ${two} ${three} ${four}`);
// Output: 1 2 3 4

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

const obj = {x: 10, y: 20};
// Provide the same properties names while destructuring object
const {x, y} = obj;
console.log(`x: ${x} y: ${y}`);
// Output: x: 10 y: 20

Thanks for reading!