Spread Operator In TypeScript

In Typescript, you can use spread operator to spread the element of an array or object. The spread operator can be used for initializing an array or object from another array or object. You can also use spread operator for object destructuring.

To read more about object destructuring, you can follow below link:

Destructuring In JavaScript Can Make Your Code Short And Cleaner

Let’s explore some of the examples of Spread operators.

Spread Operator Examples

Learn how to initialize array from another array

Create new array from existing array.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


let Array1 = [1, 2, 3]; //1,2,3
let Array2 = [4, 5, 6]; //4,5,6

//Create new array from existing array
let copyArray = [...Array1]; //1,2,3

//Create array by merging two arrays
let mergedArray = [...Array1, ...Array2]; //1,2,3,4,5,6

//Create new array from existing array + more elements
let newArray = [...Array1, 7, 8]; //1,2,3,7,8

Expanded version of an array into another array

1
2
3
4
5
6
7
8
9


var list = [1, 2];
list = [...list, 3, 4];
console.log(list); // [1,2,3,4]

//put expanded array at any position

var list = [1, 2];
list = [0, ...list, 4];
console.log(list); // [0,1,2,4]

A Better way to concatenate arrays

1
2
3
4
5
6
7
8
9


var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// concatenate array using concat()
arr1 = arr1.concat(arr2);

//concate array using spread
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; // arr1 is now [0, 1, 2, 3, 4, 5]

Learn how to initialize object from another object

Similarly, you can create new object from existing object.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


let Object1 = { a: 1, b: 2, c: 3 }; //{a: 1, b: 2, c: 3}
let Object2 = { d: 4, e: 5, f: 6 }; //{d: 4, e: 5, f: 6}

//Create new object from existing object
let copyObject = { ...Object1 }; //{a: 1, b: 2, c: 3}

//Create new object from existing object + more elements
let newObject = { ...Object1, g: 7, h: 8 }; //{a: 1, b: 2, c: 3, g: 7, h: 8}

//Create object by merging two objects
let mergedObject = { ...Object1, ...Object2 }; //{a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}

Spread operator in Object Destructuring

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

1
2
3
4
5
6
7
8
9


function myFunc(x, y, z) {
  console.log(x);
  console.log(y);
  console.log(z);
}

var paramArray = [0, 1, 2];

myFunc(...paramArray); //10, 20, 30

Object Spread

You can simply add a property to an object without mutating the original.

1
2
3


const point1 = { x: 1, y: 2 };
/** Create a new object by using all the point1 properties along with z */
const point2 = { ...point1, z: 3 };

Note: For objects, the order of where you put the spread matters. What comes first is ‘overridden’ by what comes later.

1
2
3
4
5


const point1 = { x: 1, y: 2 };
const newPoint1 = { x: 5, z: 4, ...point1 };
console.log(newPoint1); // {x: 1, y: 2, z: 4}
const newPoint2 = { ...point1, x: 5, z: 4 };
console.log(newPoint2); // {x: 5, y: 2, z: 4}

Summary

So, in summary, we learn how we can use spread operator to spread an array or object elements. I tried to give a lot of useful example of using the spread operator in your TypeScript code. It is really fun to play with spread operator.