In JavaScript, Variable hoisting is the behavior of moving declarations to the top of the current scope. This means that variables and functions can be used before they are declared.

Here is an example of variable hoisting:

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

In this example, the console.log statement is executed before the x variable is declared. However, because of variable hoisting, the declaration of x is moved to the top of the current scope, so the console.log statement does not produce an error. Instead, it logs undefined, since the value of x has not been assigned yet.

Variable hoisting only applies to declarations, not assignments. For example:

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

In this example, there is no declaration for the x variable, only an assignment. Therefore, the console.log statement produces a ReferenceError, since the x variable has not been declared.

Function declarations are also hoisted in JavaScript. For example:

foo(); // "Hello!"

function foo() {
  console.log("Hello!");
}

In this example, the foo function is called before it is declared. However, because of function hoisting, the declaration of the foo function is moved to the top of the current scope, so the call to foo does not produce an error. Instead, it logs “Hello!” to the console.

Variable hoisting can be confusing and is generally considered a bad programming practice, as it can make it difficult to understand the order in which code is executed and can lead to unexpected behavior. It is generally recommended to declare variables and functions at the top of their respective scopes to avoid confusion.

Hoisting of var, let and const

var: The var keyword is used to declare a variable in JavaScript. It is function-scoped, which means that the variable is only accessible within the function in which it is declared. If it is not declared within a function, it is accessible globally. var declarations are hoisted to the top of their scope, but their value is not. This means that you can use the variable before declaring it, but it will have a value of undefined until the declaration is executed.

let: The let keyword is also used to declare a variable in JavaScript. It is block-scoped, which means that the variable is only accessible within the block in which it is declared. let declarations are not hoisted to the top of their scope like var declarations are. This means that you cannot use the variable before declaring it, or you will get a reference error.

const: The const keyword is used to declare a variable that cannot be reassigned. It is also block-scoped like let. const declarations are not hoisted to the top of their scope like var declarations are. This means that you cannot use the variable before declaring it, or you will get a reference error.

Here is an example to illustrate the difference between the three keywords:

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

console.log(y);  // Output: ReferenceError: y is not defined
let y = 10;

console.log(z);  // Output: ReferenceError: z is not defined
const z = 15;

In the example above, the var declaration is hoisted to the top of the scope, so the first console.log statement does not throw an error. However, the let and const declarations are not hoisted, so the second and third console.log statements throw a reference error.

You can find the complete JavaScript Tutorials here.

Follow us on Facebook, YouTube, Instagram, and Twitter for more exciting content and the latest updates.

The post Hoisting in JavaScript appeared first on CodingTute.