19:11
Hoisting in JavaScript 🔥(variables & functions) | Namaste JavaScript Ep. 3
Akshay Saini
Overview
This video explains the concept of 'hoisting' in JavaScript, a phenomenon where variables and functions can be accessed before they are declared or initialized in the code. It details how JavaScript's execution context, specifically the memory creation phase, allocates memory for variables (initializing them with `undefined`) and functions (storing the function definition itself) before code execution begins. The video also differentiates between `undefined` and `not defined`, and explains how different function declaration syntaxes (function declaration, arrow functions, function expressions) are treated during hoisting.
How was this?
Save this permanently with flashcards, quizzes, and AI chat
Chapters
- JavaScript allows accessing variables and functions before their declaration/initialization, which appears like magic compared to other languages.
- Accessing an uninitialized variable results in `undefined`, while accessing a completely undeclared variable results in a `ReferenceError`.
- Functions declared using the `function` keyword are hoisted and available before declaration.
- Hoisting is the term for this behavior, where JavaScript makes declarations available throughout their scope.
Understanding hoisting helps demystify seemingly strange JavaScript behaviors, preventing unexpected errors and allowing for more predictable code.
Calling a function `get_name()` and logging a variable `x` before they are declared in the code, resulting in the function executing and `x` logging as `undefined`.
- JavaScript execution involves a memory creation phase before code execution.
- During memory creation, JavaScript scans the code for variable and function declarations.
- Variables declared with `var` are allocated memory and initialized with `undefined`.
- Functions declared using the `function` keyword have their entire code definition stored in memory.
This phase is the underlying mechanism for hoisting, explaining why code can reference declarations before they appear syntactically.
Using browser developer tools to inspect the global scope and observe that `x` is already present with a value of `undefined` and `get_name` holds the function's code, even before the first line of executable code runs.
- A variable declared but not yet assigned a value holds `undefined`.
- A variable that has not been declared at all results in a `ReferenceError: [variable name] is not defined`.
- This difference highlights whether memory was allocated for the variable during the creation phase.
Distinguishing between `undefined` and `not defined` is key to diagnosing scope and declaration issues in JavaScript.
Logging `x` when `var x = 7;` is commented out (results in `undefined` if `var` was present, or `not defined` error if `var` was removed entirely).
- Standard function declarations (`function name() {}`) are fully hoisted, including their code.
- Function expressions (e.g., `var name = function() {}`) are hoisted like variables; the variable name is hoisted and initialized to `undefined`.
- Arrow functions assigned to variables (e.g., `var name = () => {}`) are also hoisted like variables and are initially `undefined`.
- This behavior explains why calling an arrow function before its assignment results in a 'not a function' error.
Understanding how different function declaration methods affect hoisting is crucial for writing reliable asynchronous and event-driven JavaScript.
Comparing the behavior of `function get_name() {}` (hoisted as a function) versus `var get_name = () => {}` (hoisted as `undefined`) when accessed before their definition.
- JavaScript uses an execution context stack (call stack) to manage code execution.
- When a script starts, a global execution context is created and pushed onto the stack.
- When a function is called, a new execution context for that function is created and pushed onto the top of the stack.
- When a function finishes, its execution context is popped off the stack, and control returns to the previous context.
Visualizing the call stack demonstrates how JavaScript manages function calls and returns, providing a concrete understanding of program flow.
Using a debugger to step through code, observing the anonymous global execution context at the bottom of the call stack, and seeing a new `get_name` execution context appear on top when the function is invoked, then disappear upon function completion.
Key takeaways
- Hoisting in JavaScript means declarations are processed before execution, making variables and functions available throughout their scope.
- Variables declared with `var` are hoisted and initialized to `undefined`; functions declared with `function` are hoisted with their full code.
- Arrow functions and function expressions assigned to `var` are hoisted as variables, meaning the variable name exists but its value is `undefined` until the assignment line.
- Accessing a variable before declaration results in `undefined` (if declared with `var`), while accessing an undeclared variable causes a `ReferenceError`.
- The JavaScript engine uses an execution context and call stack to manage code execution, creating new contexts for function calls.
- Understanding hoisting and execution contexts is fundamental to mastering JavaScript's behavior.
- Different function declaration syntaxes have distinct hoisting behaviors.
Key terms
HoistingExecution ContextMemory Creation PhaseCall StackUndefinedReferenceErrorvarFunction DeclarationFunction ExpressionArrow Function
Test your understanding
- How does JavaScript's memory creation phase enable hoisting for variables and functions?
- What is the fundamental difference between `undefined` and `not defined` in JavaScript, and how does hoisting relate to this?
- Explain why a standard function declaration can be called before its written position, but an arrow function assigned to a variable cannot.
- How does the call stack manage the execution of nested functions, and how does this relate to the concept of execution contexts?
- What are the practical implications of hoisting for developers writing JavaScript code?