Why the code below changes the boolean value of an object's property?-CodePudding

I have the following code:

todos$ = new BehaviorSubject<TodoInterface[]>([]);
  filter$ = new BehaviorSubject<FilterEnum>(FilterEnum.all);

  addTodo(text: string): void {
    const newTodo: TodoInterface = {
      id: Math.random().toString(16),
      text: text,
      isCompleted: false,
    };
    const updateTodos = [...this.todos$.getValue(), newTodo];
    this.todos$.next(updateTodos);
    console.log(this.todos$);
  }

  toggleAll(isCompleted: boolean): void {
    const updatedTodos = this.todos$.getValue().map((todo) => {
      //   todo.isCompleted = isCompleted;          
      return {
        ...todo,
        isCompleted,
      };
    });
    this.todos$.next(updatedTodos);        
  }

The thing I achieve with the toggleAll function is that every Todo object's isCompleted property will change from false to true. I follow along a tutorial and there the instructor changed the property's value the way seen above, however, it is totally not clear for me how after the spread operator the boolean value of the argument 'isCompleted' can overwrite the object property's value. Could someone please explain it?

The commented part is what I personally wanted to do without using the next method and I think it's a better approach and less confusing.

CodePudding user response：

Array.map() will return a new array, with one item for every item in the original array. A function you provide decides what the new item will be, and can access the old item. It can be a transformation, or modification, or other arbitrary operation that produces a new value for the new array. In this case the thing you are doing is returning an object that is almost like the original one except that the value of isCompleted is set by the argument in the function. The spread operator ... simply copies all the props of the old item to the new item.

Then the next line isCompleted, sets the value of isCompleted to whatever is passed as the function argument. Now, we can assume that the old object also had an isCompleted already. But this line overwrites whatever that was (by including this line after the ... part).

This part uses a shorthand assignment syntax as described here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#new_notations_in_ecmascript_2015

And is the same as saying this:

return {
        ...todo,
        isCompleted: isCompleted
      };