One array still refers to a second array after .push()-method (JS/vue.js)

Question

I want to have two arrays filled with dates. The first one should have those dates in string-format and the second should be the same dates as date-objects.

methods: {
    test() {
        let employments = [
            { begin: '01.01.2000', end: '01.01.2010' },
            { begin: '01.01.3000', end: '01.01.3010' },
            { begin: '01.01.4000', end: '01.01.4010' }
        ];
        let items = [];
        for(let i = 0; i <  employments.length; i++) {
            items.push(employments[i]);
        }
        for(let i = 0; i < items.length; i++ ) {
            // splitting it up for the correct format
            let begin = items[i].begin.split('.').reverse().join('-');
            let end = items[i].end.split('.').reverse().join('-');
            items[i].begin = new Date(begin);
            items[i].end = new Date(end);
        }
        console.log('items:');
        console.log(items);
        console.log('this.employments:');
        console.log(employments);
    }
}

I expected to have two different outputs. One with strings in it and the other one with date objects. What I got instead were two arrays with date objects. And I just don't get why.

I also tried directly giving employments to items (like "let items = employments;" ) instead of doing the push-method, but this didn't work either.

Thanks in advance

You're pushing references to objects, not objects themselves. You likely want to clone the objects. — Heretic Monkey, Jun 04 '19 at 14:36
When you do `items.push(employments[i]);`, you're making the items in both arrays the same items -- they are different arrays referencing the same object. Maybe try `items.push(Object.assign({},employments[i]));` or look into `Array.map` — TKoL, Jun 04 '19 at 14:37
Possible duplicate of [Why does changing an Array in JavaScript affect copies of the array?](https://stackoverflow.com/questions/6612385/why-does-changing-an-array-in-javascript-affect-copies-of-the-array) — Heretic Monkey, Jun 04 '19 at 14:37
See also [Copying of an array of objects to another Array without object reference in javascript(Deep copy)](https://stackoverflow.com/q/9885821/215552) — Heretic Monkey, Jun 04 '19 at 14:49

Maheer Ali · Accepted Answer · 2019-06-04T14:49:11.610

You are need to push() a copy of object. Your object is shallow object so you can use spread operator to create a copy.

for(let i = 0; i <  employments.length; i++) {
     items.push({...employments[i]});
}

Or simply you can do

const items = employments.map(x => ({...x}))

You don't need to create another array and then push into it. Just use map() on the employments and change both the properties. Moreover use a separate function for creating Date objects.

methods: {
    test() {
        let employments = [
            { begin: '01.01.2000', end: '01.01.2010' },
            { begin: '01.01.3000', end: '01.01.3010' },
            { begin: '01.01.4000', end: '01.01.4010' }
        ];
        const format = str => new Date(str.split('.').reverse().join('-'));

        let items = employments.map(({end,start}) => 
                          ({
                              end: format(end),
                              start:format(start)
                          })
                    )

    }
}

@HereticMonkey I will do that. But the question you mentioned doesn't have `push()` used and its array of strings not array of objects. The solution provided by the first answer will not be applicable to this case. Because array of objects needs to be copied deeply. — Maheer Ali, Jun 04 '19 at 14:41
Then consider it a challenge to find a more applicable duplicate. I'm sure there are number of questions about this topic on Stack Overflow. — Heretic Monkey, Jun 04 '19 at 14:44

One array still refers to a second array after .push()-method (JS/vue.js)

1 Answers1