How Functions Work in JavaScript Under the Hood

How Functions Work in JavaScript Under the Hood

Functions are the workhorses of JavaScript. Understanding what happens when you call one makes you a much stronger developer.

What Happens on Invocation

When you invoke a function, the engine:

1. Creates a new function execution context.
2. Runs the memory allocation phase for that function's body.
3. Pushes a frame onto the call stack.
4. Runs the code execution phase line-by-line.
5. Returns a value (or undefined), pops the frame.

The Memory Phase Inside a Function

The engine scans the function body and allocates memory for:

• Parameters: bound to the argument values passed in.
• var declarations: hoisted with undefined.
• let/const declarations: hoisted but in the TDZ.
• Inner function declarations: stored in full.
• arguments object (in regular functions): array-like, holds all arguments.

The Code Phase

After memory is set up, the engine runs the body line-by-line. Assignments overwrite the hoisted undefined values. Nested function calls push new frames on top.

Example Walkthrough

function makeGreeting(name) {
  var message = "Hello";
  function greet() {
    return message + " " + name;
  }
  return greet();
}
console.log(makeGreeting("Kunal"));

1. makeGreeting("Kunal") invoked. New context. name = "Kunal", message = undefined, greet stored in full.
2. Code phase: message = "Hello".
3. greet() invoked. New context on top. No locals of its own, but it can see message and name via the scope chain.
4. greet returns "Hello Kunal", frame popped.
5. makeGreeting returns that string, frame popped.
6. "Hello Kunal" is logged.

The Variable Environment

The variable environment is where the function's local variables live. It is part of the execution context. Each function call has its own variable environment, so recursive calls each have their own copies of local variables.

The Takeaway

Invoking a function creates an execution context with a memory phase (allocate locals) and a code phase (run the body). The variable environment holds locals for that call. The scope chain lets inner functions see outer variables. Each call has its own context, so recursion and re-entrancy are safe.