Variable hoisting in JavaScript
0 likes302 views
Variable hoisting in JavaScript moves variable declarations to the top of their scope before execution, affecting how variables declared with var, let, and const are accessed. While var variables are hoisted and initialized with undefined, let and const are hoisted but uninitialized until evaluated, creating a 'temporal dead zone.' This means let and const cannot be accessed before their declarations are executed, leading to reference errors in such cases.
Variable hoisting in JavaScript
- 2. Variable Hoisting Variable Hoisting is a behaviour in Javascript where variable declaration are moved to the top of the scope before execution function hoist() { a = 20; var b = 100; } hoist(); console.log(a); // Accessible as a global variable outside hoist() function. Output: 20 console.log(b); // Since it was declared, it is confined to the hoist() function scope. We can't print it out outside the confines of the hoist() function. Output: ReferenceError: b is not defined
- 3. Hoisting and var The var variable is scoped to the function it sits within, or the global scope if it isn’t within a local function. Global Variable, console.log(hoist); // Output: undefined var hoist = 'The variable has been hoisted.'; Function Variable, function hoist() { console.log(message); var message='Hoisting is all the rage!' } hoist(); // Output: undefined
- 4. Hoisting and let The let variable is a new form of variable introduced in ES2015. Instead of being scoped to the nearest function, let is scoped to the nearest block. console.log(hoist); // Output: ReferenceError: hoist is not defined let hoist = 'The variable has been hoisted.'; Declare the variables first, let hoist; console.log(hoist); // Output: undefined hoist = 'Hoisted'
- 5. Hoisting and const The const keyword was introduced in es6 to allow immutable variables. That is, variables whose value cannot be modified once assigned. console.log(hoist); // Output: ReferenceError: hoist is not defined let hoist = 'The variable has been hoisted.'; Globally, const PI; console.log(PI); // Output: SyntaxError: Missing initializer in const declaration PI=3.142;
- 6. So are let and const variables not hoisted? All declarations are hoisted in javascript, while the var declarations are initialized with undefined, but let and const declarations remain uninitialized. ● They will be only initialized when their lexical block is evaluated by engine. ● Making it inaccessible before it is evaluated. ● This inaccessible time span between creation and initialization is called “Temporal Dead zone”. So, answer to the question, let and const hoist but cannot access them before the actual declaration is evaluated