Variable Hoisting : 

  • Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. This means that 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. 
  • The variable declarations are dispersed throughout the function definition. Because of this, it is an antipattern.

Impact

  • Variables declaration at multiple places in a single scope reduces the readability of code.
  • Hence, this code is difficult to maintain.

Characteristics

  • Variables are declared in all over the scope in a scattered manner.

Example(s)

function declare() 
{   
 var  a = 10; 
 console.log(a); // 10   
 console.log(b); // undefined                                     
 var b = 11; 
 console.log(b); // 11
}                                                           

Solution: All the variables are declared at the top of the function.

function declare() 
{  
 var  a = 10, b = 11;
 console.log(a);     // 10
 console.log(b);    // 11
}

Guidelines

  1. Variable declaration should be at the top in the scope.
  2. Fixing this will improve the readability and maintainability of the code.