Hoisting in JavaScript
Moving variable declarations to the top of the scope in which they are defined is known as the hoisting principle. JavaScript thus handles declarations before running the code line by line.
You can utilise a variable before its declaration appears in your code thanks to this feature of JavaScript. Compared to many other programming languages, this may appear odd or even unpleasant, yet it is a basic feature of JavaScript’s behaviour.
A key idea in JavaScript is hoisting, which describes a particular behaviour associated with how the JavaScript engine processes variable and function declarations prior to the code being run line by line. Moving variable declarations to the top of the scope in which they are defined is the definition of this principle. Particularly, function declarations and var variables are covered by this approach.
The declarations are conceptually “lifted,” “raised,” or “placed on top of” their surrounding scope. You can utilise a variable or call a function before its declaration appears in your code thanks to this automated feature.
It is important to note that no assignments or other executable logic are lifted; only the declarations themselves are. The assignment (the “chicken”) is metaphorically preceded by the declaration (the “egg”). Issues might arise if hoisting were to change the way your code’s executable logic is organised.
Hoisting with var
The var keyword raises a variable’s declaration to the top of its scope, which can be either the function scope in which it is contained or the global scope if it is declared outside of any function. A var declaration is raised to the top of the containing function or the global scope, not simply the block itself, even if it appears inside a block (as in an if statement or loop). A variable defined inside a block-scope would be lifted back to the global scope.
You won’t receive a ReferenceError if a var variable is utilised before its assignment executes. Rather, the unique JavaScript undefined value will be assigned to the variable. Bugs may originate from this. As an illustration, the code
console.log(foo); // → undefined
var foo = 42;
console.log(foo); // → 42
Before the assignment foo = 42;, foo was accessible but undefined as it is handled as though the definition var foo; was at the top. The definition of the variable’s name is raised, but not its value.
It is generally not common or a good idea to rely on variable hoisting to use a variable earlier than its declaration appears because it can be confusing, even if hoisting is automatic and can serve as a safety feature to prevent errors. It is advised to always define variables at the start of a function to prevent misunderstandings.
Hoisting with let and const
Variables declared using let and const are clearly stated as not being hoisted in the same manner as variables declared with var. Their application is restricted to the parameters of their definition. One of the main reasons let is strongly advised over var is the difference in scope and hoisting behaviour. Instead of merely viewing an undefined value, a ReferenceError will be raised if a let or const variable is attempted to be used before its declaration within its block scope. Unlike var, which has a function or global scope, let and const introduce block scope.
Hoisting Functions
Additionally, function declarations that are defined with the function keyword are raised. This implies that a function declaration can be called before the code defines it. In this instance, the implied value of the function itself is included in the declaration of the function name.
But unlike function declarations, variables that reference functions (function expressions) are not raised. The assignment of the function value is not hoisted, even though the variable declaration for the function expression may be (and so initialised to undefined). Because the variable holds undefined, which is not a function, using it before the assignment has taken place will result in a TypeError.
Comprehending hoisting is essential to comprehending how JavaScript scope functions.