Javascript push into array without reference

Question

This is super frustrating to me so I hope someone can help. The below is a small example to illustrate my problem.

var group = {
    names: []
}
var groupList = {
    group: [],
    activity:[]
}

$(document).ready(function(){

    $("#play").click(function(){

        var soccer = group;

        var person = "Jack";
        soccer.names.push(person);

        var person = "Amber";
        soccer.names.push(person)

        groupList.group.push(soccer); //group[0]

        // how do I make a constructor for a new group?
        var soccer1 = group;
        var person = "Jill";
        soccer1.names.push(person)

        groupList.group.push(soccer1); //group[1]

        // expect group 0 to be [Jack,Amber] (but pushing Jill on group1 updates group0)
        $("#beta").append("Soccer Group: "+groupList.group[0].names +"<br/>");

         // expect group 1 to be either [Jack,Amber,Jill] or [Jill]
        $("#beta").append("Soccer Group: "+groupList.group[1].names +"<br/>");

    });

});

I need to create a new instance of group without changing the original group.

https://jsbin.com/hetenol/edit?html,js,output

Possible duplicate of [JavaScript: How to pass object by value?](https://stackoverflow.com/questions/7574054/javascript-how-to-pass-object-by-value) — marekful, Jan 17 '18 at 01:56
By convention, only capitalize constructor functions. So change to `var game ... ` — radarbob, Jan 17 '18 at 02:04
It's worth mentioning that you're talking about an `object`, not an `array`, which is where the problems come in: https://medium.com/@fknussel/arrays-objects-and-mutations-6b23348b54aa — random_user_name, Jan 18 '18 at 03:06
`AllGames.Games.push( JSON.parse( JSON.stringify( Game ) ) );` https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript — Slai, Jan 18 '18 at 03:18
Possible duplicate of [What is the most efficient way to deep clone an object in JavaScript?](https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript) — Vivek Athalye, Jan 18 '18 at 03:21

Adam Patterson · Answer 1 · 2018-01-17T03:45:17.293

1

EDIT: The following will only work if you plan to fill the arrays Game.player and Game.score with primitives.

You could clone the arrays like this:

AllGames.games.push({
  player: [...Game.player],
  score: [...Game.score]
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

edited Jan 17 '18 at 03:45

answered Jan 17 '18 at 02:30

Adam Patterson

958
7
13

See OP at _"When I push the Game onto AllGames, I want it to copy and not reference Game."_ – guest271314 Jan 17 '18 at 03:15
Unless you want to modify `Array.prototype.push`, I don't see that happening. – Adam Patterson Jan 17 '18 at 03:18
I understood the OP's question as asking, copy Game by value, instead of by reference. – Adam Patterson Jan 17 '18 at 03:20
At the code at Answer if a value is changed at the original object the value will be changed at the object within the new array. – guest271314 Jan 17 '18 at 03:25
@guest271314 I appreciate that your reputation is so high, but I have to disagree with you here. When I run this code and change a value of the original array, the newly created object retains its value. Can you explain? – Adam Patterson Jan 17 '18 at 03:34
`var Game = { player: [{abc:123}], score: [] }; var AllGames = { Games: [] }; AllGames.Games.push({ player: [...Game.player], score: [...Game.score] });Game.player[0].abc = 345; console.assert(AllGames.Games[0].player[0].abc === 123, [AllGames.Games[0].player[0]])` – guest271314 Jan 17 '18 at 03:39
For some reason I assumed the arrays player and score were to contain primitive values not objects. I will edit my answer to be more specific. Thanks – Adam Patterson Jan 17 '18 at 03:43
Can you show me how to do the Clone with this example? https://jsbin.com/hetenol/edit?html,js,output – user1854438 Jan 18 '18 at 20:59

score 1 · Answer 2 · answered Jan 18 '18 at 21:10

1

Solution to the question:

var soccer1 = jQuery.extend(true,{}, group);

answered Jan 18 '18 at 21:10

user1854438

1,784
6
24
30

score 0 · Answer 3 · answered Jan 18 '18 at 21:19

You can use a function called "group" as a constructor.

function group() {
    this.names = [];
}

var groupList = {
    group: [],
    activity:[]
}

$(document).ready(function(){

$("#play").click(function(){

    var soccer, soccer1, person;

    soccer = new group();

    person = "Jack";
    soccer.names.push(person);

    person = "Amber";
    soccer.names.push(person)

    groupList.group.push(soccer); //group[0]

    soccer1 = new group();
    person = "Jill";
    soccer1.names.push(person)

    groupList.group.push(soccer1); //group[1]

    // expect group 0 to be [Jack,Amber]
    $("#beta").append("Soccer Group: "+groupList.group[0].names +"<br/>");

     // expect group 1 to be [Jill]
    $("#beta").append("Soccer 1 Group: "+groupList.group[1].names +"<br/>");

    });

});

Javascript push into array without reference

3 Answers3