Core JavaScript: The Last-Minute Recap

console.log(count);     // undefined  ← memory phase already created it
console.log(increment); // ƒ increment() { ... }  ← whole function is ready

var count = 0;
function increment() {
  count++;
}

increment();
console.log(count);     // 1  ← now the code phase has run

let count = 0;

function bump() {
  count++;
  console.log("bump →", count);
}

function runTwice() {
  bump();
  bump();
  console.log("runTwice done");
}

runTwice();
// bump → 1
// bump → 2
// runTwice done

// Stack over time:
// [GEC] → [GEC, runTwice] → [GEC, runTwice, bump] → [GEC, runTwice]
//       → [GEC, runTwice, bump] → [GEC, runTwice] → [GEC]

var count = 0;
count++;              // fine
var count = 10;       // fine — var can be redeclared

let total = 0;
total++;              // fine — reassigning is allowed
// let total = 5;     // SyntaxError: Identifier 'total' has already been declared

const LIMIT = 5;
// LIMIT++;           // TypeError: Assignment to constant variable

const counter = { count: 0 };
counter.count++;      // ALLOWED — mutating the object's contents
console.log(counter); // { count: 1 }
// counter = {};      // TypeError — reassigning the binding is not allowed

function counter() {
  let count = 0;   // brand new variable on EVERY call
  count++;
  return count;
}

console.log(counter()); // 1
console.log(counter()); // 1  ← NOT 2 — fresh environment each time
console.log(counter()); // 1

var count = 0;
let total = 0;

console.log(window.count);    // 0          ← var attaches to window
console.log(window.total);    // undefined  ← let does not
console.log(this === window); // true       ← at top level, non-strict

function bump() {
  console.log(this === window); // true in non-strict, undefined-this in strict mode
}
bump();

var count;
console.log(count);          // undefined      ← declared, no value yet
console.log(typeof count);   // "undefined"

console.log(total);          // ReferenceError: total is not defined
console.log(typeof total);   // "undefined"    ← safe, doesn't throw

let score = null;            // deliberately empty — different intent
console.log(score);          // null
console.log(typeof score);   // "object"  ← famous JS quirk, worth knowing

let count = 100;         // global

function outer() {
  let step = 5;          // outer's scope

  function inner() {
    count += step;       // both found by walking outward
    console.log(count);
  }

  inner();
}

outer();                 // 105
console.log(step);       // ReferenceError — lookup never goes inward

// ---- TDZ starts here for `count` ----
console.log(total);   // undefined  ← var: hoisted AND initialized
console.log(count);   // ReferenceError: Cannot access 'count' before initialization

var total = 0;
let count = 0;
// ---- TDZ for `count` ends on the line above ----

count++;
console.log(count);   // 1

let count = 1;
{
  let count = 99;      // a separate variable, living only in this block
  count++;
  console.log(count);  // 100
}
console.log(count);    // 1   ← outer one never touched

var total = 1;
{
  var total = 99;      // NOT a copy — the exact same variable
  total++;
}
console.log(total);    // 100 ← the outer value was overwritten

function createCounter() {
  let count = 0;             // lives in createCounter's lexical environment

  return function () {
    count++;                 // still reachable after createCounter() has returned
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2   ← count SURVIVED — this is the closure
console.log(counter()); // 3

const another = createCounter();
console.log(another()); // 1   ← a completely independent closure
console.log(counter()); // 4   ← the first one is untouched

// BROKEN — one shared `count`
for (var count = 1; count <= 3; count++) {
  setTimeout(() => console.log(count), count * 1000);
}
// 4, 4, 4   ← loop finished long before any callback ran

// FIX 1 — let gives each iteration its own binding
for (let count = 1; count <= 3; count++) {
  setTimeout(() => console.log(count), count * 1000);
}
// 1, 2, 3

// FIX 2 — IIFE creates a new scope per iteration (the pre-ES6 answer)
for (var count = 1; count <= 3; count++) {
  (function (captured) {
    setTimeout(() => console.log(captured), captured * 1000);
  })(count);
}
// 1, 2, 3

let count = 0;

function bumpAndLog(step) {
  count += step;
  console.log(count);
}

// higher-order function: takes a callback, decides when to call it
function repeat(times, callback) {
  for (let i = 1; i <= times; i++) callback(i);
}

repeat(3, bumpAndLog);
// 1
// 3   (1 + 2)
// 6   (3 + 3)

// Listener pitfall
const btn = document.querySelector("#bump");
btn.addEventListener("click", bumpAndLog);
btn.removeEventListener("click", bumpAndLog);   // works — same reference
btn.removeEventListener("click", (n) => count++); // does nothing — new function

function increment(n) {
  return n + 1;
}

let count = 0;
for (let i = 0; i < 1_000_000; i++) {
  count = increment(count);
}
console.log(count); // 1000000

// What V8 did:
// 1. Parse    → tokens → AST
// 2. Ignition → bytecode, runs immediately
// 3. TurboFan → notices increment() is "hot" after many calls,
//               compiles it to optimized machine code mid-run
// 4. Orinoco  → frees memory nothing can reach anymore (Mark-and-Sweep)

let count = 0;

console.log("sync start", ++count);        // sync start 1

setTimeout(() => {
  console.log("macrotask", ++count);       // runs LAST
}, 0);

Promise.resolve().then(() => {
  console.log("microtask", ++count);       // runs before the timer
});

console.log("sync end", ++count);          // sync end 2

// Output:
// sync start 1
// sync end 2
// microtask 3   ← microtask queue drains first
// macrotask 4   ← even with a 0ms delay