Array always get last value in each element

Question

In my loop I create a new variable and set a new value each time its looping(obviously)

But when the loop is done and outside my loop I console.log() the array which is filled in the loop. Its logging every element with the value of the last element.

I've tried to use .push() to fill the array.

state = {
    dates: ['2019-02-04', '2019-02-05', '2019-02-06'],
    entry: {
        value1: undefined,
        value2: undefined,
        value3: {
            value3_1: undefined,
            value3_2: undefined
        },
        date: undefined
    }
}

functionToFillArray() {
    let entries = [],
        entry = this.state.entry;

        entry.value1 = 'value1';
        entry.value2 = 'value2';
        entry.value3 = {
            value3_1: 'value3_1',
            value3_2: 'value3_2'
        };

    this.state.dates.forEach((date, i) => {
        entry.date = date;

        entries.push(entry);
    });

    console.log(entries);
}

The output that I would expect is:

[
    {
        value1: 'value1',
        value2: 'value2',
        value3: {
            value3_1: 'value3_1',
            value3_2: 'value3_2'
        },
        date: '2019-02-04'
    },
    {
        value1: 'value1',
        value2: 'value2',
        value3: {
            value3_1: 'value3_1',
            value3_2: 'value3_2'
        },
        date: '2019-02-05'
    },
    {
        value1: 'value1',
        value2: 'value2',
        value3: {
            value3_1: 'value3_1',
            value3_2: 'value3_2'
        },
        date: '2019-02-06'
    }
]

The value I get(Always the same date):

[
    {
        value1: 'value1',
        value2: 'value2',
        value3: {
            value3_1: 'value3_1',
            value3_2: 'value3_2'
        },
        date: '2019-02-06'
    },
    {
        value1: 'value1',
        value2: 'value2',
        value3: {
            value3_1: 'value3_1',
            value3_2: 'value3_2'
        },
        date: '2019-02-06'
    },
    {
        value1: 'value1',
        value2: 'value2',
        value3: {
            value3_1: 'value3_1',
            value3_2: 'value3_2'
        },
        date: '2019-02-06'
    }
]

In JavaScript objects are always passed by copy-reference. You are always updating `this.state.entry` and not a new object. — Weedoze, Feb 08 '19 at 12:45
Possible duplicate of [javascript pass object as reference](https://stackoverflow.com/questions/16880418/javascript-pass-object-as-reference) — Weedoze, Feb 08 '19 at 12:45

trincot · Answer 1 · 2019-02-08T13:25:41.577

Your code mutates the same this.state.entry object in each iteration and pushes that single object reference again and again to the array, so in the end that array indeed contains several entries, but all having the same object reference.

All in all, the this.state.entry value -- which you seem to want to use like a template -- really serves no purpose. You anyway are assigning new values to all of its properties. So there seems no need for it.

Just replace this:

let entry = this.state.entry;

with:

let entry = {};

Now entry will be a newly created object in each iteration.

Updated Question - Updated Answer

After the edit to your question, you only assign a date property to the same object over and over again.

The principle remains the same. Now replace this:

functionToFillArray() {
    let entries = [],
        entry = this.state.entry;
    entry.value1 = 'value1';
    entry.value2 = 'value2';
    entry.value3 = {
        value3_1: 'value3_1',
        value3_2: 'value3_2'
    };
    this.state.dates.forEach((date, i) => {
        entry.date = date;
        entries.push(entry);
    });
    console.log(entries);
}

...with:

functionToFillArray() {
    let entries = this.state.dates.map((date, i) => {
        return {
            value1: 'value1',
            value2: 'value2',
            value3: {
                value3_1: 'value3_1',
                value3_2: 'value3_2'
            },
            date
        };
    });
    console.log(entries);
}

This way you create a new object in each iteration. There is no gain to first initialise an object and then overwrite each of its properties, as then you still are working with a single object. You need a new one each iteration.

Note that the Array's map method is more useful here than forEach, but it is not related to your problem.

But in this case I have to copy the whole object and define the properties again. — MrLine, Feb 08 '19 at 12:54
But you are doing that already (i.e. you are already defining the properties again) -- which is what I wrote in my answer. — trincot, Feb 08 '19 at 12:57
Sorry, I just updated my example code. I displayed the way I tried as first later on I tried it like the update example — MrLine, Feb 08 '19 at 13:05
I added a section to my answer to answer your modified question. — trincot, Feb 08 '19 at 13:26

score 0 · Answer 2 · answered Feb 08 '19 at 13:00

Use destructuring.

const state = {
  dates: ['2019-02-04', '2019-02-05', '2019-02-06'],
  entry: {
    value1: undefined,
    value2: undefined,
    value3: {
      value3_1: undefined,
      value3_2: undefined
    },
    date: undefined
  }
};

function ToFillArray() {
  let entries = [];

  state.dates.forEach((date, i) => {
    const entry = {
      ...state.entry,
      value1: 'value1',
      value2: 'value2',
      value3: {
        value3_1: 'value3_1',
        value3_2: 'value3_2'
      },
      date
    };

    entries.push(entry);
  });

  console.log(entries);
}

ToFillArray();

score 0 · Answer 3 · answered Feb 08 '19 at 13:03

0

You aren't creating a copy, you are creating a link to this.state.entry and after that creating circular objects. Try creating a copy first.

...
this.state.dates.forEach((date, i) => {
        let entry = {...this.state.entry};
...

answered Feb 08 '19 at 13:03

dporechny

638
5
12

score -1 · Answer 4 · answered Feb 08 '19 at 12:48

-1

This is because you are always referring to the same variable instead of copying it, modifying the state, try this instead:

let stateCopy= {...this.state};
let entry = stateCopy.entry

    entry.value1 = 'value1';
    entry.value2 = 'value2';
    entry.value3 = {
        value3_1: 'value3_1',
        value3_2: 'value3_2'
    };
    entry.date = date;

    entries.push(entry);

You can refer to this article for a more detailed explanation :)

Also in this particular case it's not really necessary to re-use the object in the state since you assign the properties each time

answered Feb 08 '19 at 12:48

Silvio Biasiol

856
8
14

Why? Should not be a copy? – Silvio Biasiol Feb 08 '19 at 12:55
Sure, but the copy of `state` is shallow, so `entry` will still reference the *same* object. – trincot Feb 08 '19 at 12:58

Array always get last value in each element

4 Answers4

Updated Question - Updated Answer