Angular what's the meaning of these three dots in @NGRX Angular what's the meaning of these three dots in @NGRX angular angular

Angular what's the meaning of these three dots in @NGRX


The three dots are known as the spread operator from Typescript (also from ES7).

The spread operator return all elements of an array. Like you would write each element separately:

let myArr = [1, 2, 3];return [1, 2, 3];//is the same as:return [...myArr];

This is mostly just syntactic sugar as it compiles this:

func(...args);

to this:

func.apply(null, args);

In your case this gets compiled to this:

return [...state, action.payload];//gets compiled to this:return state.concat([action.payload]);


It is a spread operator (...) which is used for spreading the element of an array/object or for initializing an array or object from another array or object.

Let's create new array from existing array to understand this.

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


The ...(spread operator) works by returning each value from index 0 to index length-1: