CODEWITHSUNDEEP
javascriptangulartypescript
mightycode Newton
mightycode Newton

Reputation: 3949

difference between spread operator and without the spread in angular

I just have a question about a piece of code that can be done with the spread operator (...) and without the spread operator. But the result stays the same.


 exercisesChanged = new Subject<Exercise[]>();
  finishedExercisesChanged = new Subject<Exercise[]>();
  private availableExercises: Exercise[] = [];

fetchAvailableExercises() {
    this.fbSubs.push(this.db
      .collection('avaibeleExercises')
      .snapshotChanges()
      .map(docArray => {
        return docArray.map(doc => {
          return {
            id: doc.payload.doc.id,
            name: doc.payload.doc.data()['name'],
            duration: doc.payload.doc.data()['duration'],
            calories: doc.payload.doc.data()['calories']
          };
        });
      })
      .subscribe((exercises: Exercise[]) => {
        console.log(exercises);
        this.availableExercises = exercises;
        this.exercisesChanged.next(this.availableExercises);
        console.log(exercises);
      }));
  }

So it is about this line:

 this.exercisesChanged.next(this.availableExercises);

If I just do with the spread operator: ...this.availableExercises or without. The result doesn't change. So what is the benefit of it then?

And I use it in this component:

export class NewTrainingComponent implements OnInit, OnDestroy {
  exercises: Exercise[];
  exerciseSubscription: Subscription;

  constructor(private trainingService: TrainingService) {}

  ngOnInit() {
    this.exerciseSubscription = this.trainingService.exercisesChanged.subscribe(
      exercises => (this.exercises = exercises)
    );
    this.trainingService.fetchAvailableExercises();
  }
}

Upvotes: 0

Views: 721

Answers (1)

sohaieb azaiez
sohaieb azaiez

Reputation: 780

I will explain everything to you: Spread operator will copy all of your object {keys,values} (except some advanced types like symboles) and assign it to a new variable (means a new reference or lets say a new memory address reference).
To more clarification: Of course there is a big difference between using spread and without spread operator i will give you an example:

lets say: this.availableExercises has a memory address of 0xAABBCCDD so:
this.exercisesChanged.next(this.availableExercises); ==> this line will pass the 0xAABBCCDD address to the .next(..) method to be handled after by some codes.
but if we use spread operator like:

this.exercisesChanged.next({...this.availableExercises}); ==> this will generate a copy of the {keys,values} means a new object of your previous 0xAABBCCDD addressed object, and assign it to a new reference (new memory address) like 0x99FF1155.
To understand what i meant look at this example:

let myOldReference = this.availableExercises; // memory address: 0xAABBCCDD 
this.exercisesChanged.next(myOldReference); // .next(0xAABBCCDD);

let myNewReference = {...this.availableExercises}; // this will generate a copy to a new memory address: 0x99FF115
this.exercisesChanged.next(myNewReference ); // .next(0x99FF115);

so that myOldRefernce !== myNewReference because 0xAABBCCDD is different to 0x99FF115 as references. But keep in mind, this will keep the same {keys, values} because it's a copy of keys values, but with different memory references.

That's why you see the same keys,values, but in backgroud, it's different references.

Upvotes: 2

Related Questions