Understand how variables are held in JavaScript: As values or references

In JavaScript, or rather programming, a variable is a location in the memory of a computer used to store data. Variables are declared (given a name, an identifier) and could be assigned a value immediately or later, depending on the language. This variable can then be referred to later in the program rather than explicitly stating the same value over again.

In JavaScript, data is passed around in form of values, these values could be either primitive or object values. As a JavaScript developer, understanding how JavaScript handles data is crucial to having strong basics in the language.

Primitive values include:

• strings.
• numbers.
• booleans.
• BigInt.
• Symbol.
• Undefined.

Object values on the other hand are:

• arrays.
• functions.
• objects.

These value types behave differently when they are passed around, consider the snippet below:

var myName = "Fred";
var otherName = myName;
myName = "Ashley";
console.log(myName); //Ashley
console.log(otherName); //Fred

Notice that otherName remained the same even though it seems like a "copy" of myName. In reality, what actually happened is that when otherName was assigned myName, it was not assigned as a copy of the string "Fred", rather, a new string "Fred" was created. Thus, there is no direct link between myName and otherName. This is how JavaScript passes primitive values around.

Object values are handled differently, take a look at the snippet below:

var myObj = {color: "red"};
var otherObj = myObj;
myObj.color = "blue";
console.log(myObj.color); //blue
console.log(otherObj.color); //blue

Here, and object was created and assigned to myObj, which was then assigned to otherObj, see how otherObj and myObj color properties were both changed just by changing the color property of myObj. This is because object values are passed around as references. myObj doesn't directly refer to the object, it points to its reference instead, otherObj is then assigned myObj which is a reference to the real object. Hence, both variables are linked to the same object because they point to the same reference, a change in one affects the other.

This is why comparison (===) of two objects directly returns false, you are literally comparing two different references. Here, myObj === otherObj returns true because we are comparing the same references.

I hope this gives you a fresh perspective of how JavaScript works behind the scenes.

Till then, stay bug-free.