A square with the letters 'JS' and the word 'variables' next to it.

JavaScript Variables

Planted: Jul 2022

Status: decay

2 people taken hostange. Sitting back-to-back with a rope tied around both of them.

Variables

A variable is a binding between a name and a value. A variable is:

▪ declared when a const, let or var keyword is used with a name: let myVar
▪ initialized when an initial value is assigned to it: myVar = 1
▪ reassigned when its value changes: myVar = 2

Although you can declare and initialize a variable on the same line of code: let myVar = 1, the engine will declare and initialize it in 2 different steps.

A Nintendo Entertainment System and an arcade machine.

Primitive vs Object Binding

etaphor:

Imagine you owned a Nintendo console with your favourite game. Only you can play it. You set the high-score and stop playing. Later, you come back to play again. You still hold the high-score.

Your local arcade has the same game. You don't own the arcade machine, you only have the street address of the arcade. You go there, play it and get the high score. A week later, you come back. Your high-score is no longer there. Another player who also had street address of the arcade beat your high-score.

A primitive binding is like owning your own copy of a game. Only you can set the high-score. An object binding is like an arcade machine. You don't own it, you only have the street address. You can set the high-score, but so can others.

JavaScript has 7 types:

▪ null
▪ undefined
▪ boolean
▪ string
▪ number
▪ symbol
▪ object

All the types are primitives except for object.

▪ When you assign a primitive to a variable, let myVar = 1, the value 1 is bound to the name myVar.
▪ When you assign an object to a variable, let myVar = { a: 1 }, the value isn't bound to myVar. Instead, an object reference is bound to myVar. The memory address of { a: 1 }.

Code showing before and after compile time of a variable storing an object. Before, the value is an object. After the value is a memory address

When assigning or passing variables of a primitive, a copy of the value is created.

Console

// primitive binding
var var1 = 1
var var2 = var1
var var3 = var1

var2++
console.log(var3)

When assigning or passing variables of an object, a copy of the reference is created. If 2 variables are assigned the same object, changing the value of 1 will change the other.

Console

// object binding
var var1 = { a: 1 }
var var2 = var1
var var3 = var1

var2.a++
console.log(var3)

When comparing objects using the equality opertor, ===, the results can be unintuitive. See Referential Equality for details.

A painting Declaration of Independence - John Trumbull, 1818.

Redeclaring

Redeclaring a var will result in a no-op (nothing will happen on any additional declarations). Redeclaring a const or let results in an error.

Console

let myVar;
let myVar;

2 characters in an arcade game about to fight.

undefined vs undeclared

undefined is the default value of a variable or property.

Console

let myVar;
console.log(myVar);

Attempting to access a variable that hasn't been declared throws a reference error. Although the error states myVar is not defined, a more accurate description is myVar is undeclared.