JavaScript Hoisting — Can You Call This Function?

Why This Question Matters

If you're coming from C++ or Java, seeing a function call *before* the function definition usually feels like a recipe for a crash. In those languages, the compiler generally reads from top to bottom. If it hasn't seen the function yet, it doesn't know it exists.

JavaScript is different. It has this behavior called hoisting, which is one of those things that feels like magic until you actually understand how the JS engine parses your code. New developers often get tripped up here because they assume the code executes exactly in the order it's written. Understanding hoisting isn't just about passing a technical interview; it's about knowing why your code doesn't crash when you organize your files in a certain way.

Understanding the Code

Let's look at the snippet again:

greet()
function greet() {

  console.log("Hello!")

}

At first glance, you might think: *"Wait, we're calling greet() on line 1, but the function isn't defined until line 3. This should throw a ReferenceError."*

But if you run this in a browser console or Node.js, it works perfectly. It prints "Hello!".

Here is what's actually happening under the hood. When the JavaScript engine runs your script, it doesn't just start executing line 1 immediately. It performs a "creation phase" first. During this phase, it scans the code for variable and function declarations.

When the engine sees function greet() { ... }, it essentially "hoists" the entire function definition to the top of its current scope.

In the engine's mind, the code actually looks like this:

function greet() {
  console.log("Hello!")
}
greet()

The declaration is moved up, but the actual execution of the code stays where it is. By the time the engine hits the greet() call, the function is already stored in memory and ready to go.

Finding the Correct Answer

In this challenge, the correct answer is Option B (which indicates the code runs successfully).

Why? Because Function Declarations are fully hoisted. The engine allocates memory for the function body before a single line of code is executed.

Now, here is where people get confused. If we change the syntax slightly, the result changes completely. Imagine we used a Function Expression instead:

greet() // TypeError: greet is not a function
var greet = function() {

  console.log("Hello!")

}

In this case, var greet is hoisted, but it's initialized as undefined. You're essentially trying to call undefined(), which crashes your app. If you used const or let, you'd get a ReferenceError because those are stored in a "Temporal Dead Zone" and cannot be accessed before the line they are declared on.

Common Mistakes Developers Make

The biggest mistake is assuming all "functions" are hoisted the same way. There is a massive difference between a Function Declaration (function name() {}) and a Function Expression (const name = function() {}).

Another common trip-up is mixing hoisting with variable shadowing. If you have a function named calculate and a variable named calculate in the same scope, the variable declaration usually takes precedence during the execution phase, which can lead to some very weird bugs where your function suddenly "disappears" and becomes undefined.

Also, don't assume that because you *can* call functions before they are declared, you *should*. Relying too heavily on hoisting can make your code harder to read for other developers who might not be as familiar with the JS engine's internals.

Real-World Usage

In a production environment, you'll see this logic applied in how we organize modules. Many developers prefer to put their high-level "orchestration" logic at the top of a file and move the small, helper utility functions to the bottom.

For example:

initApp(); // Main entry point at the top
function initApp() {

  setupDatabase();

  startServer();

}
function setupDatabase() { 

  /* ... */ 

}
function startServer() { 

  /* ... */ 

}

This structure is actually quite clean. It allows someone reading your code to see the "big picture" immediately without having to scroll through 200 lines of helper functions to find where the execution actually starts.

Key Takeaways

- Function declarations are fully hoisted, meaning the entire function is moved to the top of the scope during the creation phase.
- Function expressions (using var, let, or const) are not hoisted in the same way. They will either be undefined or throw a ReferenceError.
- Hoisting is a mechanism of the JS engine, not a "feature" you should necessarily rely on for every single line of code.
- Organizing your main logic at the top and helpers at the bottom is a common, valid pattern thanks to this behavior.