Passing object by a link

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 did not touch the second object secondCat, but it changed along with the first object firstCat. Why did that happen? Does it even make any sense?

In JavaScript, quite. There is always one object, no new place is created in memory for a copy of the object. Each variable contains not a new separate entity, but a reference to a single object. Therefore, when we change something in an object through one of the variables that contains a reference to it, the changes are visible in all other variables, be it twenty or forty of them. This is an important feature of objects to remember. It’s called transferring objects by reference.

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.

Despite the fact that objects are known to behave like that, the work of the program can become obscure and therefore difficult to understand or debug, if we want to transfer the changed array somewhere else, because we change the array implicitly during the course of the loop. The code should be written as simply and clearly as possible, for yourself and for other developers. Therefore, we will return the changed array players from the function and write it to the array cats, thus obviously updating it.