Writing High‑Quality JavaScript Functions: Execution Mechanism, Robustness, Functional Programming and Design Patterns

This article introduces a series that explores how to write high‑quality JavaScript functions from multiple angles, including execution mechanism, robustness, functional programming, and design patterns.

Outline of the series

Functions (everything is possible)

Function naming

Function comments

Function complexity

Function robustness (defensive programming)

Function parameters and return values

Using functional programming to enhance functions

Applying design patterns to functions

Writing V8‑friendly functions

Front‑end engineer’s function notes

The first article focuses on the first topic – “Functions (everything is possible)”.

1. Purpose of Functions

Functions are the most important tool for saving space and improving performance. They are the core mechanism for code reuse and modularity.

2. Execution Mechanism of a Function

Understanding how a JavaScript function is executed is essential for writing efficient code. The process can be divided into four steps:

Allocate a new heap memory block.

Store the function body (as a string) in that heap memory.

Declare the function name in the current execution context (the stack) and hoist the declaration.

Assign the heap address to the function identifier.

Example code used to illustrate the steps:

function say() {
  let str = 'hello world';
  console.log(str);
}

The article visualises the memory layout with an image (function name points to a heap address where the source code string resides).

3. Assignment Operation

Assignment copies a reference from the heap to a stack variable. From a low‑level perspective, the heap, stack, and code segments are distinct memory regions. The assignment operation moves a pointer (handle) from the heap into the stack, which is why JavaScript variables behave like references.

Assembly‑like illustration:

start:
  mov ax, 1
  mov bx, 1
  add ax, bx
end start;

4. Function Execution

When a function is called, a new execution context (stack frame) is created. The function body string is deserialized into executable code, arguments are bound, variable hoisting occurs, and the code runs top‑to‑bottom.

Key steps:

Create a stack environment for the call.

Copy the function body from heap to the new stack frame.

Perform parameter assignment and variable hoisting.

Execute statements sequentially.

5. Scope Chain and Closures

The scope chain is essentially a linked list of activation objects (AO). Each function’s AO points to its outer lexical environment, forming a chain that the engine walks to resolve identifiers.

Illustration of a simple closure:

function kun() {
  var result = [];
  for (var i = 0; i < 10; i++) {
    result[i] = function() { return i; };
  }
  return result;
}
let r = kun();
r.forEach(fn => console.log('fn', fn()));

Because the loop uses var , all inner functions share the same AO where i ends up as 10 , resulting in ten “10” outputs.

Using an IIFE to capture the current value:

function kun() {
  var result = [];
  for (var i = 0; i < 10; i++) {
    result[i] = (function(n) { return function() { return n; } })(i);
  }
  return result;
}
let r = kun();
r.forEach(fn => console.log('fn', fn()));

This creates ten distinct activation objects, each holding a different n , producing outputs 0‑9.

6. Practical Tips

Reduce scope‑chain lookups by passing global objects (e.g., window ) as parameters to IIFEs.

Avoid stack overflow by limiting recursion depth and being aware that each call allocates a new stack frame.

7. References

JS 函数的创建和执行机制

探索JS引擎工作原理

程序内存空间（代码段、数据段、堆栈段）

函数调用–函数栈

堆栈向上增长和向下增长的深入理解

By mastering the low‑level execution details, developers can write clearer, more performant, and more maintainable JavaScript functions.