How Execution Context and Hoisting Work in JavaScript

Hey everyone! Welcome back to "The MERN Handbook." In our last article, we covered the basics of JavaScript. Today, let’s explore two critical concepts: execution context and hoisting. These will help you understand how JavaScript runs your code. Let's break it down in a friendly and simple way!

Execution Context

The execution context is like the setting where JavaScript code is executed. It determines the behavior of your code at runtime. There are three types of execution contexts:

1. Global Execution Context (GEC):

   • This is the default context where JavaScript code starts running.

   • It creates the global object (like window in browsers) and sets up the this keyword to point to the global object.

   • Every script has its own GEC.

2. Function Execution Context (FEC):

   • Whenever a function is called, a new execution context is created for that function.

   • This context sets up the local scope, including arguments, local variables, and the this keyword.

3. Eval Execution Context:

   • Created when code is executed inside an eval function.

   • Though not commonly used, it's good to know it exists.

Each execution context goes through two phases: the creation phase and the execution phase.

Creation Phase:

• Variable Object (VO): JavaScript collects all function arguments, variable declarations, and function declarations.

• Scope Chain: Manages variable access within the current scope.

• this: Determines the value of this.

Execution Phase:

• JavaScript executes the code line-by-line.

• Variables and function references are resolved, and the actual code execution happens.

Hoisting

Hoisting is JavaScript’s way of moving variable and function declarations to the top of their containing scope during the creation phase.

• Variable Hoisting:

  • Variables declared with var are hoisted to the top, but only the declarations, not the initializations.

    console.log(foo); // undefined
    var foo = 'Hello World';
    console.log(foo); // 'Hello World'

• Function Hoisting:

  • Function declarations are fully hoisted, meaning you can call the function before its declaration.

    greet(); // 'Hello World'
    function greet() {
      console.log('Hello World');
    }

• Let and Const Hoisting:

  • Variables declared with let and const are hoisted but not initialized. They are in a "temporal dead zone" until the declaration is encountered.

    console.log(bar); // ReferenceError: Cannot access 'bar' before initialization
    let bar = 'Hello World';
    console.log(bar); // 'Hello World'

Why Understanding Execution Context and Hoisting Matters:

• Predict Code Behavior: Knowing these concepts helps you understand how your code will run, especially in complex situations.

• Avoid Common Pitfalls: Helps prevent bugs that can arise from variable hoisting and scope issues.

• Write Reliable Code: Ensures your code works as expected, making it easier to debug and maintain.

Extra Resources

To get a deeper understanding of these concepts, check out these resources:

• Books:

  • JavaScript: The Good Parts by Douglas Crockford

  • Eloquent JavaScript by Marijn Haverbeke

  • You Don’t Know JS series by Kyle Simpson

• Online Courses:

  • JavaScript Basics on freeCodeCamp

  • JavaScript Essentials on Codecademy

• YouTube Channels:

  • Traversy Media

  • The Net Ninja

I hope this detailed explanation helps you get a better grasp of execution context and hoisting in JavaScript. Stay tuned for our next post, where we'll continue exploring JavaScript functions and their power in making your code modular and reusable. Happy coding!