Execution Context in JavaScript - Exercise 2

JavaScript prepares bindings, stores function declarations, sets up scope links, and determines this before executing statements. This separation helps explain which values and bindings are available at each point in the program.

console.log(score); // undefined
var score = 100;
// var score was prepared before execution.

JavaScript evaluates expressions, assigns values, and runs statements from top to bottom. This separation helps explain which values and bindings are available at each point in the program.

var count; // prepared as undefined
count = 3; // assigned during execution
console.log(count);

Function declarations are stored during context creation, so the complete function is available when execution begins. This separation helps explain which values and bindings are available at each point in the program.

sayHello();
function sayHello() {
  console.log('Hello');
}

var is initialized to undefined; let and const remain in the Temporal Dead Zone until execution reaches their declarations. This separation helps explain which values and bindings are available at each point in the program.

console.log(a); // undefined
// console.log(b); // ReferenceError
var a = 1;
let b = 2;

It is the period between entering a scope and executing a let or const declaration, during which accessing the binding throws a ReferenceError. This separation helps explain which values and bindings are available at each point in the program.

{
  // console.log(token); // TDZ
  const token = 'ready';
  console.log(token);
}

JavaScript checks the current environment first, then follows outer environment references until it finds the name or reaches the global scope. This separation helps explain which values and bindings are available at each point in the program.

const theme = 'dark';
function render() {
  const label = 'Menu';
  return `${theme}: ${label}`;
}
console.log(render());

The returned function retains a reference to the outer environment, so the captured binding remains reachable. This separation helps explain which values and bindings are available at each point in the program.

function createCounter() {
  let count = 0;
  return () => ++count;
}
const next = createCounter();
console.log(next(), next());

Only the variable binding is prepared. The function value is assigned when execution reaches the assignment. The example shows how that rule affects the values you can read or call.

// greet(); // TypeError: greet is not a function
var greet = function () {
  console.log('Hi');
};
greet();

Their bindings are created when the context is set up, but cannot be accessed until execution reaches the declaration. This period is called the temporal dead zone.

// console.log(total); // ReferenceError
let total = 3;
console.log(total);

A returned inner function retains access to the variables in its outer function's environment. Those bindings stay available as long as the closure can reach them.

function makeAdder(amount) {
  return value => value + amount;
}
const addFive = makeAdder(5);
console.log(addFive(2));