Hoisting in JavaScript

https://scotch.io/tutorials/understanding-hoisting-in-javascript

What is Hoisting?

• JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

  • no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local.

undefined vs ReferenceError

undefined

• In JavaScript, an undeclared variables is assigned the value undefined at execution and is also of type of undefined.

ReferenceError

• In JavaScript, a ReferenceError is thrown when trying to access a previously undeclared variable.

The behavior of JavaScript when handling variables becomes nuanced because of hoisting!

Hoisting variables

• all undeclared variables are global variables

ex)

function hoist() {
  a = 20;
  var b = 100;
}

hoist();

console.log(a); 
/* 
Accessible as a global variable outside hoist() function
Output: 20
*/

console.log(b); 
/*
Since it was declared, it is confined to the hoist() function scope.
We can't print it out outside the confines of the hoist() function.
Output: ReferenceError: b is not defined
*/

var

function scoped

ex)

console.log(hoist); // Output: undefined

var hoist = 'The variable has been hoisted.';

• JavaScript has hoisted the variable declaration

let

block scope

ex1)

console.log(hoist); // Output: ReferenceError: hoist is not defined ...

let hoist = 'The variable has been hoisted.';

ex2)

let hoist;

console.log(hoist); // Output: undefined
hoist = 'Hoisted'

• We should declare then assign our variables to a value before using them!

const

Introduced in ES6 to allow immutable variables

ex1)

const PI = 3.142;

PI = 22/7; // Let's reassign the value of PI

console.log(PI); // Output: TypeError: Assignment to constant variable.

ex2)

console.log(hoist); // Output: ReferenceError: hoist is not defined

const hoist = 'The variable has been hoisted.';

ex3)

const PI;
console.log(PI); // Ouput: SyntaxError: Missing initializer in const declaration
PI=3.142;

• the variable is hoisted to the top of the block

• must be both declared and initialized before use.

Hoisting functions

JavaScript functions

1. Function declarations

2. Function expressions

Function declarations

Hoisted completely to the top

ex)

hoisted(); // Output: "This function has been hoisted."

function hoisted() {
  console.log('This function has been hoisted.');
};

Function expressions

Not hoisted

ex)

expression(); //Output: "TypeError: expression is not a function

var expression = function() {
  console.log('Will this work?');
};

Order of precedence

1. Variable assignment takes precedence over function declaration

   var double = 22;
   
   function double(num) {
     return (num*2);
   }
   
   console.log(typeof double); // Output: number

2. Function declarations take precedence over variable declarations

   var double;
   
   function double(num) {
     return (num*2);
   }
   
   console.log(typeof double); // Output: function

Function declarations are hoisted over variable declarations but not over variable assignments!

Hoisting classes

JavaScript Classes

1. Class declartions

2. Class expressions

Class declarations

Hoisted like function declarations

ex)

var Frodo = new Hobbit();
Frodo.height = 100;
Frodo.weight = 300;
console.log(Frodo); // Output: ReferenceError: Hobbit is not defined

class Hobbit {
  constructor(height, weight) {
    this.height = height;
    this.weight = weight;
  }
}

• you have to declare a class before you can use it

Class expressions

Not hoisted like function expressions

ex)

var Square = new Polygon();
Square.height = 10;
Square.width = 10;
console.log(Square); // Output: TypeError: Polygon is not a constructor

var Polygon = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};