TypeScript / JavaScript Spread Operator

The spread operator is a new addition to the features available in the JavaScript ES6 version. The spread operator is used to expand or spread an iterable or an array in Typescript or Javascript.

1. When to use the Spread Operator?

The spread operator (in the form of ellipsis) can be used in two ways:

  • Initializing arrays and objects from another array or object
  • Object de-structuring

The spread operator is most widely used for method arguments in the form of rest parameters where more than 1 value is expected. A typical example can be a custom sum(...args) method which can accept any number of method arguments and add them to produce the sum.

function sum(...args: number[]) {

    return args.reduce((sum, current) => sum + current, 0);

//function can be invoked with any number of parameters 
sum();      //0
sum(1);     //1
sum(1, 2);  //3
sum(1, 2, 3, 4);    //10

2. Spread Operator Example

Let us check out a few examples of the spread operator to understand its usage better.

2.1. Initialize a New Array from Another Array

We can use the spread operator to create arrays from existing arrays in the given fashion.

let origArrayOne = [ 1, 2, 3]; 							//1,2,3
let origArrayTwo = [ 4, 5, 6]; 							//4,5,6

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

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

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

2.2. Initialize a New Object from Another Object

We can also use the spread operator to create objects from the existing objects in the given fashion.

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

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

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

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

2.3. 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.

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

var parametersArray = [0, 1, 2];

myFunction(...parametersArray);		//0, 1, 2

3. Difference between Spread Operator and apply() Method

The JavaScript’s apply() method calls a function with a given this value, and arguments provided as an array.
For example, in the below example, both highlighted function calls are equivalent. They both print the same output.

The Spread operator (part of ECMAScript 6) is a better version of the apply() method. Using the spread operator, we can write the above statement as given below.

var numbers = [1, 2, 3, 4, 5];

console.log.apply(console, numbers);	//1 2 3 4 5 

console.log(...argsArray);		//1 2 3 4 5

Happy Learning !!

Ref: Mozilla Docs


Notify of
Inline Feedbacks
View all comments

About Us

HowToDoInJava provides tutorials and how-to guides on Java and related technologies.

It also shares the best practices, algorithms & solutions and frequently asked interview questions.