JavaScript Variables: Value and Reference

tldr;

JavaScript has two methods of storing data in the variables you declare: by value and by reference. It’s important to understand how this works, because if you don’t there can be unintended consequences of changing the data stored in the variables. We’ll go over these two methods of storing data and show some examples so that you don’t run into any issues in your applications.

In addition to storing the data in the variables with these two methods, the same applies to passing parameters in as functions. We’ll cover that as well in this post.

Value

Let’s start with talking about storing the data by value. When a variable is assigned a value of a string, number, boolean, null, or undefined, they are storing that information by value. In essence, they contain the value in the variable. If you change the value they are storing, they forget the old value and now contain the new value. Where this really matters is when you declare a second variable and initialize it to the first variable. Here’s an example:

let myRating = 5;
let yourRating = myRating;
console.log(myRating, yourRating); // 5 5

In this example, myRating is assigned the value of 5, and yourRating is assigned the value of myRating. So what happens if we reassign the value of myRating, or reassign the value of yourRating? Well, because these variables are stored by value, they can change independently of each other:

myRating = 9;
console.log(myRating, yourRating); // 9 5

The same thing happens if you passed myRating into a function. If the function changed the value of that parameter, myRating would be unaffected.

function multiplyRating(rating) {
  return rating * 10;
}
let newRating = multiplyRating(myRating);
console.log(myRating, newRating); // 9 90

This is pretty straight forward, and honestly seems pretty natural. This is how I expected variables to behave when interacting with them. But not all variables work this way. Let’s talk about variables storing and passing by reference.

Reference

When a variable stores its data by reference, all it contains is the location in memory where the data is stored. When you copy that variable, or pass it to a function, the location in memory is all that is copied. That means that all variables are pointing to the same place in memory. If one of them change that value, all of them will reflect the change.

let dog = { name: "Duke" };
let dog2 = dog;
console.log(dog, dog2); // { name: 'Duke' } { name: 'Duke' }

dog.name = "Max";
console.log(dog, dog2); // { name: 'Max' } { name: 'Max' }

function changeName(dogObj) {
  dogObj.name = "Fido";
}
changeName(dog2);
console.log(dog, dog2); // { name: 'Fido' } { name: 'Fido' }

As we can see in the example above, changing the name attribute on one object changed the name attribute on all of the objects. That’s because in reality all of the variables are pointing to the same object; at a location in memory.

Can you see where this will cause issues if you’re not aware of it? It’s a big deal huh? If you are expecting objects or arrays to be stored or passed by value, and they’re not, you could really mess up your application.

Conclusion

This is a fundamental part of how JavaScript works, but is sometimes overlooked when teaching or learning the language. I don’t remember when I was taught this, but it wasn’t when I first started learning, that’s for sure. Passing and storing by value or reference is important to understand and to keep straight.