Javascript Hoisting

JavaScript Hoisting is one of the hot topics in a interview process and that is why I am going to help you master hoisting.

What is it?

1. Scope
2. Blocks
3. Global Scope
4. Block Scope
5. Scope Pollution

How it works?

1. Variable Hoisting
2. Function Hoisting
3. Class Hoisting

Exercises

1. Hoisting Exercises

---

Scope

Scope defines where variables can be accessed or referenced.

Blocks

Block is the code found inside a set of curly braces {}

function greet() {
    b = 'hello';
    console.log(b); // hello
    var b;
}

greet();

Global Scope

Global scope are variables that are declared outside of blocks.

const color = 'blue';

const returnSkyColor = () => {
  return color; // blue 
};

console.log(returnSkyColor()); // blue

Block Scope

Variables that are declared with block scope are known as local variables, because they are only available to the code that is part of the same block.

const logSkyColor = () => {
  let color = 'blue'; 
  console.log(color); // blue 
};

logSkyColor(); // blue 
console.log(color); // ReferenceError

Scope Pollution

Scope pollution is when we have too many global variables that exist in the global namespace, or when we reuse variables across different scopes.

let num = 50;

const logNum = () => {
  num = 100; // Take note of this line of code
  console.log(num);
};

logNum(); // Prints 100
console.log(num); // Prints 100

Variable Hoisting

Variable hoisting acts differently depending on how the variable is declared (var,let,const).

Notes:

• Variables declared with the keyword let are block scoped;
• The const keyword allow immutable variables. That is, variables whose value cannot be modified once assigned;
• Variables declared with let and const remain uninitialised at the beginning of execution whilst variables declared with var are initialised with a value of undefined.

Variable var

var foo;

console.log(foo); // undefined

foo = 'foo';

console.log(foo); // "foo"

Variable let & const

console.log(foo); // Uncaught ReferenceError: Cannot access 'foo' before initialization

let foo = 'bar';  // Same behavior for variables declared with const

Function hoisting

Function hoisting allows us to call a function before it is defined

foo(); // "foo"

function foo() {
    console.log('foo');
}

BUT NOT Function Expressions

foo(); // Uncaught TypeError: foo is not a function
var foo = function () { }

bar(); // Uncaught ReferenceError: Cannot access 'bar' before initialization
let bar = function () { }

baz(); // Uncaught ReferenceError: Cannot access 'baz' before initialization
const baz = function () { }

Class Hoisting

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;
  }
}

Hoisting Exercises

1.

function func11(){
    var a=5;
    console.log(a, b); 
    var b=6;
}
func11();

2.

console.log(var1);   
var var1 = 1;
function func(){
  console.log(var1);    
  var var1 = 2;
  console.log(var1);    
}
var var1 = 3;
console.log(var1);     
func();

3.

function func(){
  //console.log(var1);   
  //console.log(let1);   
  if(true){
    var var1 = 2;
    let let1 = 23;
  }
  //console.log(var1);   
  //console.log(let1);   
}
var var1 = 3;
func();

4.

func1();        
func2();        
function func1(){
    console.log('func1');
}
var func2 = function(){
    console.log('func2');
}

5.

var var1=2;
console.log(i);       
for(var i=0; i<11; i++){
    console.log('asdf');
}
console.log(i);