Assigning Variables in JS: Reference or Value

In a previous article about bookmarking positions in JS, we lightly touched on how variables get their value. Now, it’s worth the time to take a deeper dive into exactly how that works.

In working with JS at any level, it is important to understand how variables are actually defined with their value. Of course on the surface, it’s to ensure that the variable is being used accordingly, but even deeper, it’s to ensure that the entire ecosystem of the application isn’t unintentionally malformed by not knowing.

On the bright side, there are only two ways to define the value to variables in JS so this should be quick!

Value By Value

This is the more straightforward and easy to understand of the two approaches. Declaring a variable in JS with a value reference is exactly how it sounds. A variable declared this way will only store the value it’s being set with, and have no interactions outside of itself.

Let’s look at some code.

let a = 2;
let b = 3;

console.log(a);
// 5
console.log(b);
// 3

As you can see above, with our two variables a and b, declaring by value is exactly how’d you think it be. You set an initial value to your variable, and unless you change it, it remains as is. Moving a step further, what about declaring a new variable by reference to another variable that is declared its value as a value reference.

let a = 2;
let b = a;

a = 5;

console.log(a);
// 5
console.log(b);
// 2

Pretty easy to follow right. We initialize our first variable with the value 2, then declare our second value by referencing our first variable a. Later in our code block, we then set our variable a to a different value. That variable’s stored value updates, but our second variable remains the original value that was there when it got initialized.

Value By Reference

Now, on to the more complex of the two. Assigning value to a variable by reference is simple, yet complex at the same time. However, to make a long story short, it can be viewed as setting a variable to an instance reference of data objects like an array or object.

What I mean by reference to an instance is more of a nod to how data objects actually work in JS. Data objects don’t belong to the variables that they are defined on. When declaring them, it’s easier to think of more so as adding it to the application scope(more in detail about this later). The short answer here is because the variable doesn’t own it, just adds it to the scope and stores a reference to it.

I know that was quite a bit of information, so instead of continuing to add on ito it, let’s look into more code.

let a = [5,5,5];
let b = a;

a.push(6);
b.push(7);

console.log(a);
// [5,5,5,6,7]
console.log(b);
// [5,5,5,6,7]

As you see from the above code sample, it doesn’t matter what variable the object reference is being updated on, the update will populate to all variables where the instance is being referred to. Objects are the same as well for the most part.

let a = {prop1: {}, prop2: 'test'};
let b = a.prop1;
let c = a.prop2;

b.newProp = 2;
c = 'Kobe';

console.log(a);
// {prop1: {newProp: 2}, prop2: 'test'}
console.log(b);
// {newProp: 2}
console.log(c);
// Kobe

As you can see, updating an object by reference anywhere populates it everywhere. However, when looking to reference by a prop with a value definition, will act just like defining a value by reference.

In Closing

Simple stuff we use everyday coding in JS, but is very powerful and important to know. Hopefully this attempt to simplify somewhat complex info improves your JS understandings, fills in some curiosities about variable declarations you had only a theory on it, or was an enjoyable refresher.