How to correctly iterate over an array of dates and assigning value to another array?

Question

I have a small calendar application. For that there is an array, dates, as follows:

     const dates = [Thu Oct 01 2020 00:00:00 GMT+0400 (Azerbaijan Standard Time), 
      Thu Oct 08 2020 00:00:00 GMT+0400 (Azerbaijan Standard Time), 
      Thu Oct 15 2020 00:00:00 GMT+0400 (Azerbaijan Standard Time), 
      Thu Oct 22 2020 00:00:00 GMT+0400 (Azerbaijan Standard Time), 
      Thu Oct 29 2020 00:00:00 GMT+0400 (Azerbaijan Standard Time), 
      Thu Nov 05 2020 00:00:00 GMT+0400 (Azerbaijan Standard Time)]

Not I am iterating over dates using the forEach loop and on each iteration setting the value to an object and pushing that object in another array. The is the code below. It is the code inside a class based component of React and hence data is being accessed using this.data

      data = {};
      dataArray = [];
      dates.forEach((date) => {
              this.data.slots = values; //some other data from code
              this.data.date = moment(date).toDate();
              this.dataArray.push(this.data);
              console.log(this.dataArray);
            });

However I fail to understand the output in console when I console the value of dataArray. It shows the correct value initially but after expanding it, it shows the value of date from the last iteration.Ss attached below.

The screenshot is the console value of a single iteration when date is equal to Thurs Nov 5 2020.However the case is the same for every iteration. It shows correct value written and upon expanding gives the last array value in date.

And then of course the whole dataArray has objects with date equal to 5 Nov at every index. Why is this happening?

But the `dataArray` also shows the same i.e every index has date property set to Nov 5 2020 — Emma, Sep 05 '20 at 08:51
There's only `data` object that you're modifying on every round of the loop. At the end you have `dates.length` references to `data` stored in `dataArray` (and they therefor all show the same date). Create a new object in `.forEach()` and push this into `dataArray` — Andreas, Sep 05 '20 at 08:56
Sorry I didn't get what you are saying, can you please elaborate a bit or modify the code so that I have a better idea TIA — Emma, Sep 05 '20 at 08:58
`this.dataArray.push(this.data);` doesn't push a new object into `dataArray`. It pushes a reference to the one object stored at `this.data` - [Is JavaScript a pass-by-reference or pass-by-value language?](https://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language) — Andreas, Sep 05 '20 at 09:00
This makes a lot more sense now. Thanks a ton. I did it with another approach by directly creating objects at run time. Have edited the question too by providing answer. — Emma, Sep 05 '20 at 09:05
If you've found a solution to your problem then post it as a complete answer (what have you changed, why, working code) and accept it. Don't edit it into your question. — Andreas, Sep 05 '20 at 09:27

japrescott · Answer 1 · 2020-09-05T09:04:16.390

0

your code example is lacking some details, so I'll point to some things that seem "strange";

You are referring to this.data while the first lines don't show them as props of an object but rather plain data and dataArray
you can just use map instead of forEach -> const dataArray = dates.map((date)=>moment(date).toDate()}
it seems you are overriding the result of your prev iteration by using this.data (which is pushed as a reference). So everything you push refers to the same object (which you override on each iteration)

edited Sep 05 '20 at 09:04

answered Sep 05 '20 at 08:54

japrescott

4,736
3
25
37

The code i shared is inside a class based component of React and data is a property of that class. This is the reason I wrote this.data. Sorry forgot to mention above – Emma Sep 05 '20 at 08:55
how does your `dates` array of values look like? – japrescott Sep 05 '20 at 08:58
I have placed the dates array in the code of the question – Emma Sep 05 '20 at 09:00
1

you are overriding `this.date` in every loop and adding it to `this.dataArray`. since `this.date` is just a reference, all values in `this.dataArray` are of the last value.. – japrescott Sep 05 '20 at 09:02

How to correctly iterate over an array of dates and assigning value to another array?

1 Answers1