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

user_2239841 0
Viewed 40399

What do these three dots mean exactly, and why do I need them?

export function leadReducer(state: Lead[]= [], action: Action {
    switch(action.type){
        case ADD_LEAD:
            return [...state, action.payload];
        case REMOVE_LEAD:
            return state.filter(lead => lead.id !== action.payload.id )
}
}
ngrx angular
4 Answers

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

user_84031280

Context: Take care of this particular behavior (by value / by reference) of the three dots spread syntax, when working with sub-arrays (or any other second level properties).

Finding: Take care that nested arrays (or sub-properties) are NOT passed by value, but by reference. In other words, only first level items are passed as a copy "by value". See the example:

sourceArray = [ 1, [2, 3] ] // Second element is a sub-array
targetArray = [ ...sourceArray]
console.log("Target array result:", JSON.stringify(targetArray), "\n\n") //it seems a copy, but...

console.log("Let's update the first source value:\n")
sourceArray[0] = 10
console.log("Updated source array:", JSON.stringify(sourceArray), "\n")
console.log("Target array is NOT updated, It keeps a copy by value:")
console.log(JSON.stringify(targetArray), "\n\n")

//But if you update a value of the sub-array, it has NOT been copied
console.log("Finally, let's update a nested source value:\n")
sourceArray[1][0] = 20
console.log("Updated source nested array:", JSON.stringify(sourceArray), "\n")
console.log("Target array is updated BY REFERENCE! ", )
console.log(JSON.stringify(targetArray), "\n\n") // it is not a copy, it is a reference!

console.log("CONCLUSION: ... spread syntax make a copy 'by value' for first level elements, but 'by reference' for second level elements (This applies also for objects) so take care!\n")

user_25975910
Related