Left Arrow

Notes

Variables

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

JavaScript Variables

Planted

Status: seed

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 & 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 & initialize a variable on the same line of code: let myVar = 1, the engine will declare & initialize it in 2 different steps.

A Nintendo Entertainment System and an arcade machine.

Primitive vs. Object Binding

M

etaphor:

Imagine you owned a Nintendo console with your favourite game. Only you can play it. You set the high-score & 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 & 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.

/index.js

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.

/index.js

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.

/index.js

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.

/index.js

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.

/index.js

Console

myVar

Be aware, the typeof operator returns "undefined" for an undeclared variable.

/index.js

Console

console.log(typeof myVar)

Where to Next?

└── JavaScript
Arrow pointing down
YOU ARE HERE
└── Variables
└── this
A sci-fi robot taxi driver with no lower body