Angular Typescript array only adds last element on array.push()

Question

i have a function called in ngInit(), that fills an array with objects of a class with values generated in a for loop, using array.push().

However, once the for loop completes, all the array items are the last-added instance of the class.

Class def

class ABC{
time: number;
id: number;
 }

Function def

addToArray(){
 let arrayTemp : ABC[]= [];
 let tempClass ={} as ABC;

 for (let i = 0; i < 4; i++) {
 
   tempClass.timei+1;
   tempClass.id=i;

    let val=i;
    arrayTemp.push(tempClass);
    console.log(arrayTemp[val]);   // here class objects displayed correctly
}

   console.log(arrayTemp);  // here all elements are just the last added class object
  
  }
 }

Output of console.log(arrayTemp[val])

Output of console.log(arrayTemp) after the for loop

I'm not sure why this happens, any help would be appreciated.

each element in the array contains the same instance of the ABC class. So each time you update the tempClass values, each element will reflect the change. — cWerning
– cWerning, Commented Jun 17, 2021 at 13:58
put let tempClass ={} as ABC; inside the for loop if you want a new instance of the class with each iteration of the for loop. — cWerning
– cWerning, Commented Jun 17, 2021 at 14:00
@cWerning Why have you answered it in a comment? Just post the answer. — Austin T French
– Austin T French, Commented Jun 17, 2021 at 14:01
Javascript is not C++, read the docs on what a function does, does it make a copy of the argument or not — rioV8
– rioV8, Commented Jun 17, 2021 at 14:33

user3133 · Accepted Answer · 2021-06-17 14:24:06Z

5

When you modify Class directly, like here

   tempClass.timei+1;
   tempClass.id=i;

You are modifying the existing class instance.
Because you add this already existing instance in array with
arrayTemp.push(tempClass);
It means you edit the class you created in the beginning with
let tempClass ={} as ABC;

What you actually want to do, is create a new class instance for each iteration, like so

addToArray(){
 let arrayTemp : ABC[]= [];

 for (let i = 0; i < 4; i++) {
   // create new instance of class for each iteration
   let tempClass = new ABC();
   tempClass.timei+1;
   tempClass.id=i;

    let val=i;
    arrayTemp.push(tempClass);
    console.log(arrayTemp[val]);   // here class objects displayed correctly
}

   console.log(arrayTemp);  // here all elements are just the last added class object
  
  }
 }

Edit:
Don't forget to create your class with new keyword! If you do intialization directly as let tempClass ={} as ABC; you wont get actual representation of a class, you only get empty object that only looks like a ABC class to typescript.

edited Jun 17, 2021 at 14:24

answered Jun 17, 2021 at 14:01

user3133

6125 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wubba_luba23 Over a year ago

Thanks, fairly new to typescript, so this explanation helped tons!

Collectives™ on Stack Overflow

Angular Typescript array only adds last element on array.push()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related