Left Arrow

Notes

Variables

The icon of the Adeptus Mechanicus. A cog with a skull at the center.

Table of Contents

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)

Support Me
The Weighted Companion Cube from Aperture
Where to Next?
Notes
    
  │
  └── JavaScript
        
Arrow pointing down
YOU ARE HERE
        
  │
  └── Variables
            
  │
  └── this
A sci-fi robot taxi driver with no lower body