DEV Community 👩‍💻👨‍💻

Vasco Neves
Vasco Neves

Posted on

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();
Enter fullscreen mode Exit fullscreen mode

Global Scope

Global scope are variables that are declared outside of blocks.

const color = 'blue';

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

console.log(returnSkyColor()); // blue
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

Variable let & const

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

let foo = 'bar';  // Same behavior for variables declared with const
Enter fullscreen mode Exit fullscreen mode

Function hoisting

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

foo(); // "foo"

function foo() {
    console.log('foo');
}
Enter fullscreen mode Exit fullscreen mode

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 () { }
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

Hoisting Exercises

1.


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

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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

4.

func1();        
func2();        
function func1(){
    console.log('func1');
}
var func2 = function(){
    console.log('func2');
}
Enter fullscreen mode Exit fullscreen mode

5.

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

Top comments (0)

👋 Welcome new DEV members in our Welcome Thread

Say hello to the newest members of DEV.