What is hoisting in JavaScript?

Execution Context

When you're learning JavaScript, understanding how the language actually runs your code is crucial. At the heart of this process is something called the "Execution Context." While it might sound complex, it's actually a straightforward concept that will help you grasp how JavaScript works under the hood.

The Foundation: What is Execution Context?

Think of execution context as JavaScript's way of organizing and running your code. Just as we organize our code into functions and modules to keep things manageable, JavaScript uses execution contexts to keep track of what's happening as your program runs.

The Global Setup: First Steps

When you start running any JavaScript code, even before the first line executes, JavaScript creates what we call the "Global Execution Context." This initial setup provides two essential pieces:

// These exist automatically in every JavaScript program
window; // The global object (in browsers)
this; // References the global object

The Two-Phase Process

JavaScript runs your code in two distinct phases, which helps explain some behavior that might otherwise seem mysterious.

Creation Phase: Setting the Stage

During this first phase, JavaScript:

// The engine sets up the environment
var name;          // Variables are created with value 'undefined'
function getData() // Functions are stored in full

Think of this phase as setting up a stage before a play. The JavaScript engine:

• Creates your variables but leaves them empty (technically, sets them to undefined)
• Takes your function declarations and stores them completely
• Sets up the this keyword
• Creates the global object

Execution Phase: The Action Begins

Now JavaScript runs your code line by line:

var name = 'Sarah'; // Now variables get their real values
getData(); // Functions can be called

Understanding Hoisting Through Execution Context

Here's where things get interesting. Look at this code:

console.log(name); // Outputs: undefined
console.log(getData); // Outputs: function getData() { ... }

var name = 'Sarah';
function getData() {
  return 'data';
}

This code doesn't throw errors because of how the Creation Phase works. When you hear developers talk about "hoisting" in JavaScript, they're really talking about this two-phase process. Nothing actually moves in your code – it's just that variables and functions are processed differently during the Creation Phase:

• Variables (var declarations) are created and initialized with undefined
• Function declarations are stored in memory completely

This is why you can call functions before they appear in your code, but variables will be undefined if you try to use them before their declaration.

The process of assigning variable declarations a default value of undefined during the Creation phase is called Hoisting.