JavaScript变量提升在动态内存分配中的机制及数组内存布局疑问

Great questions—let’s break these down clearly, since hoisting and JavaScript’s memory management are such foundational (and often confusing) topics!

First, let’s clarify: hoisting isn’t about "moving code to the top" of your file—it’s a behavior driven by how JavaScript creates execution contexts before running your code.

Every time a function runs (or the global scope loads), the engine goes through two key phases:

• Creation Phase: Before any code executes, the engine sets up the execution context’s lexical environment. For variables:
  • Variables declared with var are added to the environment, initialized to undefined, and are accessible (though their value will stay undefined until assignment runs).
  • Variables declared with let/const are also registered in the environment, but they’re not initialized. This creates a Temporal Dead Zone (TDZ)—if you try to access them before their declaration line executes, you’ll get a ReferenceError.
• Execution Phase: The engine runs your code line by line. When it hits an assignment (=) for a variable, it updates the value in the already allocated memory space.

For dynamic declarations (like variables inside a function that only runs at runtime), this logic applies when the function’s execution context is created, not the global context. Here’s a concrete example:

function runLater() {
  console.log(dynamicVar); // Logs undefined (hoisted and initialized to undefined)
  var dynamicVar = "I'm declared at runtime!";
  
  console.log(dynamicLet); // Throws ReferenceError: Cannot access 'dynamicLet' before initialization
  let dynamicLet = "I'm stuck in the TDZ until this line!";
}

runLater();

Your understanding of the Creation Phase is spot-on for variables, but arrays add a twist: the actual array memory allocation doesn’t happen in the Creation Phase—that phase only handles the variable itself, not the array’s data.

Here’s the step-by-step breakdown:

1. Creation Phase: The array variable (e.g., myArray) is registered in the lexical environment just like any other variable. If it’s var, it’s set to undefined; if let/const, it’s in the TDZ. No array-specific memory is allocated here, because the engine has no way to know the runtime-determined length yet.
2. Execution Phase: When the engine reaches the line where you create the array (e.g., const myArray = new Array(userInputLength) or const myArray = [...dynamicValues]), it allocates memory in the heap—the region of memory reserved for reference types like objects, arrays, and functions.

Where array elements are stored: #

• The array variable itself (the name myArray) lives in the stack (along with primitive values like numbers or strings). This variable stores a reference (a pointer) to the array’s location in the heap.
• The array’s elements are stored in a contiguous block of memory in the heap. If you later modify the array’s length (e.g., myArray.push(newElement)), the JavaScript engine will automatically handle memory resizing: if the current heap block is too small, it’ll allocate a larger block, copy the existing elements over, and mark the old block for garbage collection.

This separation of stack and heap is why arrays can grow dynamically—heap memory isn’t fixed in size like stack memory, so the engine can adjust it as needed at runtime.

内容的提问来源于stack exchange，提问作者Dat V.