JavaScript Deep Dive — Module 1: Foundations & Core Engine Mechanics

// PRIMITIVES: copied by value. Each variable owns an independent slot on the Stack.
let a = 10;
let b = a;      // b gets its OWN copy of the value 10
b = 20;
console.log(a); // 10 -- a was never touched

// REFERENCE TYPES: the variable holds a pointer into the Heap, not the object itself.
const objA = { count: 10 };
const objB = objA;      // objB copies the POINTER, not the object
objB.count = 20;
console.log(objA.count); // 20 -- both variables point at the same Heap allocation

// Reassigning objB to a NEW object breaks the link -- it just points objB
// at a different Heap address. objA's pointer is untouched.
objB = { count: 99 };
console.log(objA.count); // still 20

// The + operator calls ToPrimitive with hint 'default' on both operands.
// Objects fall back to valueOf() then toString().
const obj = {
  valueOf() { return 42; },
  toString() { return 'fallback-string'; }
};
console.log(obj + 1); // 43 -- valueOf() won, returned a primitive number

// Template literals force hint 'string' -- toString() is tried FIRST.
const objStringHint = {
  valueOf() { return 42; },
  toString() { return 'I am a string'; }
};
console.log(`${objStringHint}`); // "I am a string"

// Date is the one built-in whose Symbol.toPrimitive prefers 'string' even
// under the 'default' hint -- this is a deliberate spec carve-out.
console.log(new Date(0) + 1); // string concatenation, NOT a numeric add

console.log(typeof varDeclared);  // 'undefined' -- registered and initialized during Creation Phase
console.log(typeof funcDeclared); // 'function'  -- entire function is hoisted with its body

try {
  console.log(letDeclared); // throws
} catch (e) {
  console.log(e instanceof ReferenceError); // true -- letDeclared is in the Temporal Dead Zone
}

var varDeclared = 'assigned';
function funcDeclared() { return 'I was hoisted whole'; }
let letDeclared = 'assigned';

// Function EXPRESSIONS do not get this treatment -- only the var binding hoists,
// not the assignment.
console.log(typeof funcExpression); // 'undefined', not 'function'
var funcExpression = function () { return 'not hoisted with my body'; };

// PRACTICAL APPLICATION: a private, encapsulated counter using closures
// instead of exposing mutable state on an object.
function createCounter(initialValue = 0) {
  let count = initialValue; // lives in createCounter's Lexical Environment

  // Both closures below capture the SAME `count` binding, not separate copies.
  return {
    increment() { return ++count; },
    decrement() { return --count; },
    getValue() { return count; },
  };
}

const counterA = createCounter(10);
const counterB = createCounter(100); // independent closure -- own `count`

counterA.increment();
counterA.increment();
console.log(counterA.getValue()); // 12
console.log(counterB.getValue()); // 100 -- untouched, separate Lexical Environment

// `count` is NOT reachable from outside -- there is no `counterA.count`.
console.log(counterA.count); // undefined -- true encapsulation, not convention-based (_count)

// BAD WAY (Don't Do This): global mutable counter -- no encapsulation,
// any code anywhere can read or corrupt the state, and it never gets GC'd.
let globalCount = 0;
function incrementGlobal() { globalCount++; }

// ARCHITECT WAY (Do This): closure-scoped state, exposed only through
// a controlled interface. The `count` binding is unreachable except via
// the returned methods -- true information hiding without `class` or `#`.
function createSecureCounter() {
  let count = 0;
  return Object.freeze({
    increment: () => ++count,
    getValue: () => count,
  });
}