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

Answer 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

Answer 2

Solution to the question:

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

Answer 3

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/>");

    });

});