Hoisting in Javascript

Prerequisites:

• Scope

Hoisting is a term that refers to the behavior of variables and function declarations in JavaScript. Essentially, when JavaScript code is executed, declarations of variables and functions are "hoisted" to the top of their scope, meaning they are processed before any other code in their scope. This means that you can use a variable or call a function before it is actually declared in the code.

For example:

console.log(x); // Outputs: undefined
var x = 5;

In this code, the console.log statement is executed before the var x = 5 statement, but the code still runs without any errors. This is because the declaration of x is hoisted to the top of the code, so it is processed before any other code. However, the assignment of the value 5 to x is not hoisted, so the value of x is still undefined at the time that console.log is executed.

It's important to note that hoisting only affects declarations, not assignments. So in the example above, the value of x is undefined because the declaration of x was hoisted, but the assignment of 5 to x was not.

However, if we change the code to use the let or const keyword instead of var,

console.log(x); // Outputs: Uncaught ReferenceError: x is not defined
let x = 5;

we get a different result: Uncaught ReferenceError: x is not defined

In this case, the output is an error because the let and const keywords do not exhibit hoisting behavior. The variables are not moved to the top of the scope and must be declared before they are used.

However, that doesn't mean that we should use var over let or const, actually, we should avoid using var as this will allow such behavior in your code and affect code readability by having variables that are used without seemingly being declared in the script .js file.

Function declarations are also hoisted in JavaScript. This means that you can call a function before it is declared in the code. For example:

codefoo();

function foo() {
  console.log('Hello, world!');
}

The foo function is hoisted to the top of the current scope, so the code is interpreted as follows:

function foo() {
  console.log('Hello, world!');
}

foo();

So, essentially, it's always a good idea to declare variables and functions at the top of their scope to avoid any confusion or unexpected behavior.

Check your understanding

1. What is hoisting in JavaScript?

   A) A behavior that moves declarations to the top of the global scope before code execution

   B) A behavior that moves declarations to the bottom of the current scope before code execution

   C) A behavior that moves declarations to the top of the current scope before code execution

   D) A behavior that moves declarations to the middle of the current scope before code execution

2. Which of the following is NOT true about hoisting in JavaScript?

   A) It affects declarations, not assignments

   B) It moves function declarations to the top of the current scope

   C) It moves variable declarations to the top of the current scope

   D) It moves all declarations to the bottom of the current scope

3. In the following code, what will be printed to the console?
   

console.log(x);
var x = 5;

A) 5

B) undefined

C) ReferenceError: x is not defined

D) TypeError: x is not a function

Answers

1. A

2. D

3. B