hoisting

Hoisting makes declarations available before the line where they appear, because JavaScript processes them when it sets up a scope, not when execution reaches them.

The ECMAScript specification doesn’t define the term. It describes the behavior as declaration instantiation, the step that creates a scope’s bindings before any of its code runs. How a binding behaves before its declaration depends on the declaration that created it:

• Function declarations: The function is fully usable, so code can call it from anywhere in its scope.
• var declarations: The var binding exists and holds undefined until the assignment runs.
• let, const, and class declarations: The binding exists but can’t be read or written until its declaration runs. That stretch is the temporal dead zone.
• import declarations: The imported bindings are ready, and the imported module has run, before any other code in the module.

Because only the declaration is hoisted, the assignment in var total = 10; still happens on its own line. A let binding also shadows an outer binding with the same name across its whole block, even above the line that declares it.

function showHoisting() {
  console.log(greet("Ada"));
  console.log(total);

  try {
    console.log(limit);
  } catch (error) {
    console.log(`${error.name}: ${error.message}`);
  }

  function greet(name) {
    return `Hello, ${name}!`;
  }
  var total = 10;
  let limit = 5;
}

showHoisting();

$ node hoisting.mjs
Hello, Ada!
undefined
ReferenceError: Cannot access 'limit' before initialization