How Does JavaScript Execute Code It Hasn't Seen Yet? The Secret of Hoisting!

Have you ever written a JavaScript program and seen a function working correctly, even though you defined that function after you used it? It's almost as if JavaScript can see the future! Well, it's not magic, but a very interesting and useful concept called Hoisting. Let's uncover this secret together and see how function hoisting internals works.

What is Hoisting Anyway?

Imagine you're a magician about to pull items out of your hat. Before the show starts, you put all the items into the hat. Hoisting is something like that. Before JavaScript starts executing code, it goes through the entire code once and "moves" all function and variable declarations (using var) to the top of their scope. Of course, only the declarations are moved, not the initializations.

Let's Look at a Simple Example

Consider this code:

        
          javascript
          
        
      console.log(myVar); // Output: undefined
var myVar = 10;

myFunction(); // Output: Hello world!

function myFunction() {
  console.log("Hello world!");
}

You might think, "Well, myVar is used first, so it should give an error!" But no. JavaScript hoists var myVar to the top of the scope, but not its initialization (i.e., myVar = 10). That's why when we execute console.log(myVar), we see the value undefined.

The same is true for myFunction. The function declaration is hoisted to the top of the scope, so we can call myFunction() before its definition and it works correctly.

Hoisting and Declaration Types

Hoisting behaves differently with different types of declarations:

var: The declaration is hoisted and initialized to undefined.
let and const: The declaration is hoisted, but not initialized. Therefore, if you use them before their definition, you will receive an error called ReferenceError. This state is called "Temporal Dead Zone" or TDZ.
function: The function declaration is fully hoisted. That is, both the declaration and the initialization.

Why is Hoisting Important?

Hoisting has some advantages and disadvantages:

Advantages:

Code flexibility: Allows you to call functions before their definition, which can improve code readability.
Code organization: Allows you to place the main functions at the top of the file and the helper functions at the bottom of the file.

Disadvantages:

Confusion: If not properly understood, it can cause confusion and strange bugs.
Unexpected behavior: Hoisting behavior differs with var, let, and const, which can lead to mistakes.

A Closer Look at function hoisting internals

When JavaScript executes your code, it first has a stage called "Compilation." In this stage, the JavaScript engine (e.g., V8 in the Chrome browser) examines the entire code once and performs a series of optimizations. One of the things that is done in this step is Hoisting.

The JavaScript engine finds all function and variable declarations and moves them to the top of their scope. This ensures that when the main code starts executing, the engine knows that these variables and functions exist.

Real-World and Practical Examples

Hoisting is not just a theoretical concept, but it is also very useful in real projects. For example, in front-end frameworks such as React or Vue, you usually define components like this:

        
          javascript
          
        
      function MyComponent() {
  return (
    <div>
      {/* ... */}
    </div>
  );
}

export default MyComponent;

You can use MyComponent in other files before you import this file because the function declaration is hoisted to the top of the scope.

Summary

Hoisting is a powerful and key concept in JavaScript. By understanding Hoisting, you can write better code, prevent bugs, and help the JavaScript engine execute your code faster. Next time you encounter a strange JavaScript code, remember Hoisting!

Alyvro

Alyvro

Alyvro

Alyvro