Objects and references

Before we continue to write the game of dice, let’s consider one important feature of objects that we come across in practice.

var firstCat = {
  name: 'Muffin',
  age: 5
};

var secondCat = firstCat;
// Logs {"name":"Muffin","age":5}
console.log(secondCat);

firstCat.name = 'Snowball';
// Logs {"name":"Snowball","age":5}
console.log(secondCat);

We changed the name through firstCat, yet we see the change through secondCat too. Why did that happen? Does it even make any sense?

In this example, both variables refer to the same object. Assigning the object to another variable copies the reference, so no second object is created. Passing an object to a function also passes a copy of its reference. Therefore, changes to the object’s properties are visible through every variable that refers to it, whether there are twenty references or forty. This shared reference is an important feature to remember.

In our program, the same thing happens. We create the array cats with player objects and transfer it to the runGame function. Inside the function, we use this array under a different name, players, and change the objects stored in it. If after the function completes its work we log cats in the console, we will see that its contents have changed, although we did not return anything from the function and it seemed that we worked with a completely different array.

Changing player objects inside the loop also changes what we see through cats. That can be easy to overlook when reading or debugging the program. To make the function’s result explicit for ourselves and other developers, we will return the updated array players and assign the result to cats. The players’ properties have already changed; returning the array makes the result visible at the call site. Both names still refer to the same array.