JavaScript Core Interview Questions

var is function-scoped and can be redeclared. let and const are block-scoped. let can be reassigned; const cannot be rebound, but object properties can still change.

if (true) {
  var a = 1;
  let b = 2;
}
console.log(a); // 1
// console.log(b); // ReferenceError
const cfg = { theme: 'dark' };
cfg.theme = 'light'; // OK

• Can you redeclare let in the same block?
• Does const freeze objects?
• Why avoid var in new code?

• Using var in loops with async callbacks
• Thinking const makes nested objects immutable
• Creating accidental globals

Use const for DOM nodes and let for filter state in a todo app so bugs surface early.

Declarations are registered before execution. var becomes undefined until its line runs. let/const are hoisted but in the TDZ until initialized. Function declarations hoist fully; function expressions follow variable rules.

console.log(x); // undefined
var x = 5;
hi();
function hi() { console.log('hello'); }

• Are let and const hoisted?
• What hoists for var fn = function(){}?
• Module hoisting?

• Assuming let is not hoisted
• Expecting expressions to hoist like declarations
• Relying on hoisting instead of clear order

Helper used before declaration in a bundle may work with function declarations but fail with const arrow helpers.

From the start of the block until the let/const line runs, the binding exists but cannot be read. Access throws ReferenceError. This prevents using variables before initialization.

{
  // console.log(n); // ReferenceError — TDZ
  let n = 10;
  console.log(n); // 10
}

• TDZ for default parameters?
• typeof in TDZ?
• var vs TDZ behavior?

• Accessing let before declaration
• Using var to avoid TDZ instead of reordering
• Confusing TDZ with no binding

Form validation that destructures let { email } after an early return must keep declaration before use.

A closure is when an inner function remembers variables from the scope where it was created, even after the outer function finishes. The inner function keeps a live reference to those bindings.

function makeAdder(x) {
  return function (y) { return x + y; };
}
const add5 = makeAdder(5);
console.log(add5(3)); // 8

• Value vs reference in closures?
• Memory leaks?
• Relation to lexical scope?

• var in loops sharing one index
• Expecting fresh primitives incorrectly in timers
• Forgetting shared outer let

Modal setTimeout still sees old state unless you close over refs or clear timers on unmount.

var is function-scoped, so one shared i exists. When timeouts run, i is already 3. Use let per iteration, an IIFE, or forEach with a parameter.

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0); // 3,3,3
}
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 0); // 0,1,2
}

• What does let do per iteration?
• Fix without let?
• Event listeners in a loop?

• var in button click loops
• Wrong copy of index tricks
• Not testing async timing

List of delete buttons: each handler needs the correct id via let, data-id, or delegation.

An Immediately Invoked Function Expression runs once at definition time, creating a private scope so variables do not leak globally. Less common with ES modules but still valid for isolating scripts.

const api = (function () {
  let key = 'secret';
  return { getKey: () => key };
})();

• IIFE vs module?
• Arrow IIFE?
• Module pattern?

• Missing wrapping parentheses
• IIFE instead of modules everywhere
• Thinking it runs later

Legacy widget on a page without a bundler can expose one global via IIFE.

this depends on call site: implicit (obj.method), explicit (call/apply/bind), new binding, or default (undefined in strict mode). Arrow functions have no own this; they use lexical this from enclosing scope.

const o = { name: 'A', f() { return this.name; } };
const g = o.f;
g(); // undefined in strict\ o.f(); // A

• this in class methods?
• Event listeners?
• Strict default binding?

• Passing methods without bind
• Arrow as object method when dynamic this needed
• Assuming this is always the instance

Submit handler passed to addEventListener loses this unless bound or arrow field.

call invokes with thisArg and comma args. apply invokes with thisArg and an args array. bind returns a new function with fixed this and optional partial args without invoking yet.

function show(a, b) { return `${this.tag}:${a}+${b}`; }
const ctx = { tag: 'X' };
show.call(ctx, 1, 2);
show.apply(ctx, [1, 2]);
const bound = show.bind(ctx, 1);
bound(2);

• bind vs arrow wrapper?
• Partial application?
• Binding constructors?

• apply when call is clearer
• Forgetting bind returns new fn
• Re-bind every render unnecessarily

Borrowing Array.prototype.slice.call(nodeList) is historical apply usage.

Objects delegate to another object on missing properties. Functions have a prototype property used with new. Object.getPrototypeOf reads the link.

const base = { greet() { return 'hi'; } };
const child = Object.create(base);
child.greet();

• proto vs prototype?
• Prototype of {}?
• Classes vs prototypes?

• Thinking classes are not prototypal
• Mutating Object.prototype
• Own vs inherited props

array.map works via Array.prototype shared by all arrays.

Instances link to a constructor’s prototype object. Lookup walks the chain. Methods live once on the prototype.

function Cat(name) { this.name = name; }
Cat.prototype.speak = function () { return this.name; };
const c = new Cat('Milo');
c.speak();

• What does new do?
• Shadowing prototype fields?
• instanceof checks?

• Mutable data on prototype shared by instances
• Replacing prototype without constructor
• Lookup confusion

Shared array on prototype mutates for all instances — put instance data in constructor.

class is syntactic sugar: methods go on the prototype, extends wires the chain, super calls parent prototype methods. typeof MyClass is function.

class Point {
  constructor(x, y) { this.x = x; this.y = y; }
  len() { return Math.hypot(this.x, this.y); }
}

• Class fields vs prototype?
• super in constructor?
• Private #fields?

• Forgetting super() in child
• Thinking methods copy per instance
• Overusing classes

Legacy React class components use extends Component — same prototype idea.

=== is strict equality without coercion. == coerces types and can surprise. Prefer === unless you intentionally coerce.

0 == false; // true
0 === false; // false
null == undefined; // true

• When is == OK?
• Object.is?
• NaN checks?

• == with strings and numbers
• === expecting deep object equality
• Truthy confusion

Query params are strings; parseInt before comparing to numeric constants.

JS converts values to string, number, or boolean in expressions. Implicit: ==, +, if. Explicit: Number(), String(), Boolean().

'5' - 1; // 4
'5' + 1; // '51'
Boolean(''); // false

• Truthy/falsy list?
• Symbol coercion?
• • with objects?

• String concat instead of add
• == across types
• null treated as 0 in math

Normalize JSON price fields with Number() before cart math.

JS runs one call stack. When empty, the event loop schedules macrotasks (timers, I/O) and microtasks (promises). Sync runs first, then microtasks, then next macrotask.

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4); // 1,4,3,2

• Multithreaded JS?
• requestAnimationFrame?
• Web Workers?

• setTimeout(0) immediate myth
• Ignoring microtasks
• Blocking main thread

Promise then updates DOM before timeout — explains some paint ordering bugs.

Macrotasks: setTimeout, setInterval, I/O. Microtasks: promise reactions, queueMicrotask. After each macrotask, all microtasks drain.

setTimeout(() => console.log('macro'));
Promise.resolve().then(() => console.log('micro'));

• async/await queue?
• Infinite microtasks?
• Node nextTick?

• Microtask starvation of timers
• await always macrotask myth
• Nested promise order confusion

Search debounce vs promise microtasks affects which result wins.

A Promise is pending, fulfilled, or rejected. then/catch/finally chain async results and errors.

fetch('/api/data')
  .then(r => r.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

• Settled promises?
• Chaining?
• Unhandled rejection?

• Missing return in then
• Callback pyramid inside then
• No final catch

Refactoring nested fetch in a project to promises is a solid interview story.

async functions return a Promise. await pauses only inside the async function until a Promise settles. Use try/catch for errors.

async function load() {
  try {
    const res = await fetch('/api/me');
    return await res.json();
  } catch (e) { return null; }
}

• Top-level await?
• Parallel await?
• Thrown errors become?

• Sequential await in loops unnecessarily
• No try/catch
• async everywhere

Promise.all for profile + settings parallel fetch improves load time.

all waits for all (fails fast on any reject unless allSettled). race settles with the first fulfill or reject.

const [a, b] = await Promise.all([fetchA(), fetchB()]);
const first = await Promise.race([slow(), timeout(5000)]);

• allSettled?
• Partial failure?
• Empty all?

• race ignoring rejections win
• all with one failure
• Too many parallel calls

Timeout wrapper with race is a practical pattern for slow APIs.

Scope determines visibility. var is function-scoped; let/const are block-scoped. Inner reads outer; not vice versa.

const g = 1;
function f() {
  const x = 2;
  if (true) { const y = 3; }
}

• Shadowing?
• Module scope?
• Implicit globals?

• Missing const creates global
• Shadowing confusion
• var in blocks

type=module scripts do not leak globals — fixes accidental window pollution.

Scope is determined by source structure, not runtime call stack. Nested functions see outer bindings where written.

function wrap(msg) {
  return () => console.log(msg);
}
const log = wrap('done');
log();

• Dynamic scope in JS?
• Blocks with let?
• vs this binding?

• Confusing this with variable scope
• Expecting dynamic variable scope
• Hoisting mix-ups

Hook closing over props uses lexical scope from the hook call.

A function that takes and/or returns another function. Examples: map, filter, middleware, timers.

function twice(fn) {
  return (x) => fn(fn(x));
}
const inc = (n) => n + 1;
twice(inc)(3); // 5

• HOF vs callback?
• React examples?
• Currying?

• Side effects inside map
• New function each render without reason
• Unclear naming

Express middleware chain is a higher-order function pattern.

A function passed to be run later — on events, timers, or async completion.

btn.addEventListener('click', () => alert('hi'));
[1,2].forEach(n => console.log(n));

• Callback hell?
• Error-first style?
• vs promises?

• Pyramid of doom
• Ignored err in Node
• No named callbacks

Upload onprogress callback is a concrete UX story.

map builds a new array from callback return values. Does not mutate the original.

const ids = users.map(u => u.id);

• map vs forEach?
• Forgotten return?
• async map?

• map for side effects
• undefined results
• map with async without Promise.all

products.map to JSX list items is standard React.

filter returns elements where callback is truthy. New array; original unchanged.

const active = users.filter(u => u.isActive);

• filter vs find?
• Mutating inside?
• Big arrays?

• Mutating while filtering
• filter one item — use find
• Many chained filters

Todo active tab: todos.filter(t => !t.done).

reduce combines array into one value via accumulator. Provide initial value for safety on empty arrays.

const total = items.reduce((sum, i) => sum + i.price, 0);

• reduce vs loop?
• Build objects?
• No initial value?

• Unreadable reduce
• Empty array without initial
• Inconsistent accumulator

Cart total with reduce and initial 0 shows money handling.

Pull values from arrays into variables in one statement. Skip slots with commas; defaults apply when undefined.

const [first, , third] = [1, 2, 3];
const [a = 0, b = 0] = [5];

• Rest in arrays?
• Nested destructuring?
• Swap variables?

• Confusing holes with undefined
• Default vs null
• Mutating source

const [err, data] = tuple-style results from a helper.

Extract properties into variables, rename with colon, defaults for missing keys.

const { name, age = 18 } = user;
const { title: job } = profile;

• Nested destructuring?
• Default with null?
• In function parameters?

• Default not applied for null
• Wrong rename syntax
• Destructuring undefined

function Card({ title, onClick }) — props destructuring in React.

Expands iterables into elements or object properties. Common for shallow copies and merging.

const next = { ...user, name: 'New' };
const all = [...a, ...b];

• Spread vs rest?
• Shallow copy?
• Order in objects?

• Expecting deep clone
• Mutating after spread assuming isolation of nested
• Spreading non-iterables

setState({ …state, count: state.count + 1 }) pattern.

In parameters, rest gathers extra arguments into an array. In destructuring, rest collects remaining properties.

function sum(first, ...rest) {
  return rest.reduce((a, n) => a + n, first);
}
const { id, ...meta } = record;

• rest vs arguments?
• rest position rules?
• rest in destructuring?

• rest not last in params
• Using arguments in arrow functions
• Confusing spread and rest

Forward unknown props with …rest in a wrapper component.

export names values; import pulls bindings (live for exports). Default vs named exports. import() for dynamic loading.

// math.js
export const PI = 3.14;
export default function add(a, b) { return a + b; }
// app.js
import add, { PI } from './math.js';

• Default vs named?
• Tree shaking?
• Circular imports?

• Mixing require and import
• No .js extension in browser bare imports without bundler
• Importing default wrong

Vite project structure story: splitting utils into named exports.

try runs code; catch handles thrown errors; finally runs always (cleanup). throw creates errors. async/await uses try/catch around await.

try {
  JSON.parse('bad');
} catch (e) {
  console.error(e.message);
} finally {
  console.log('done');
}

• Custom errors?
• finally return behavior?
• Errors in promises?

• Empty catch swallowing errors
• throw string not Error
• No catch on async

Parse localStorage JSON in try/catch to avoid blank screen on corrupt data.

Common causes: forgotten event listeners, timers, closures holding large objects, detached DOM nodes still referenced, unbounded caches.

const huge = new Array(1e6).fill(0);
window._cache = huge; // never cleared

• GC basics?
• WeakMap use?
• DevTools heap snapshot?

• No removeEventListener
• setInterval without clear
• Global caches growing forever

SPA route change: remove listeners and abort fetch in cleanup.

Engines reclaim memory when objects are unreachable from roots (global, call stack, closures). Mark-and-sweep is common. You do not free manually; drop references and avoid retaining graphs.

let obj = { big: new Uint8Array(1e7) };
obj = null; // data may be collected if no other refs

• Generational GC?
• FinalizationRegistry?
• Circular refs?

• Assuming delete frees memory
• Retaining via closure
• Debugging without heap tools

Clearing cache Map on logout prevents retained user objects.

Debounce delays invoking a function until calls stop for a wait period. Only the last call runs. Great for search input.

function debounce(fn, wait) {
  let t;
  return (...args) => {
    clearTimeout(t);
    t = setTimeout(() => fn(...args), wait);
  };
}

• Debounce vs throttle?
• Leading edge?
• Cancel debounce?

• Debounce on every keystroke with 0ms confusion
• No cleanup on unmount
• Throttle when debounce needed

Search-as-you-type with 300ms debounce reduces API load.

Throttle runs at most once per interval while events fire. Useful for scroll, resize, mousemove.

function throttle(fn, wait) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= wait) { last = now; fn(...args); }
  };
}

• throttle vs debounce?
• trailing vs leading?
• requestAnimationFrame scroll?

• Throttle search input
• Debounce scroll
• No passive listeners on touch

Infinite scroll loads next page on throttled scroll near bottom.

Transform f(a,b) into f(a)(b) for partial application and reusable specialized functions.

const multiply = a => b => a * b;
const double = multiply(2);
double(5); // 10

• Currying vs partial bind?
• Practical uses?
• Auto curry utilities?

• Currying everything unreadably
• Confusing with bind
• Arity mistakes

Create locale formatters with curried Intl options.

Shallow copy duplicates top level; nested objects shared. Spread/Object.assign are shallow. Deep copy duplicates nested structure (structuredClone, JSON trick, libraries).

const a = { x: { y: 1 } };
const b = { ...a };
b.x.y = 2;
console.log(a.x.y); // 2

• structuredClone limits?
• JSON deep copy caveats?
• Immer?

• Spread thinking deep clone
• JSON losing Date/Map
• Expensive deep clone always

Immutable update: copy top level and nested path you change.

preventExtensions: no new properties. seal: preventExtensions + cannot delete/reconfigure properties. freeze: seal + cannot change values (shallow).

const o = Object.freeze({ a: 1 });
o.a = 2; // fails silently or throws in strict

• Deep freeze?
• freeze vs const?
• Writable flags?

• Thinking freeze is deep
• Mutating nested objects
• Relying on freeze for all immutability

Document why you use immer instead of manual freeze for nested state.

find, findIndex, some, every, includes, flat, flatMap, at, toSorted (non-mutating sort in modern JS).

const user = users.find(u => u.id === 3);
const ok = items.every(i => i.qty > 0);
const nested = [1, [2, 3]].flat();

• find vs filter?
• sort mutates?
• at(-1)?

• filter()[0] instead of find
• Mutating sort on shared state
• indexOf with NaN

find user by id in admin table instead of manual loop.

includes, startsWith, endsWith, slice, substring, split, trim, replace, replaceAll, padStart.

const slug = title.trim().toLowerCase().replaceAll(' ', '-');
const ext = file.slice(file.lastIndexOf('.'));

• slice vs substring negative index?
• Immutable strings?
• Template literals vs concat?

• Mutating strings like arrays
• split regex pitfalls
• Locale case issues

Validate email with includes and regex, not only includes(’@’).

stringify converts JS values to JSON text; parse converts JSON text to values. Dates become strings; undefined/functions omitted in objects.

const raw = JSON.stringify({ a: 1 });
const obj = JSON.parse(raw);

• reviver/replacer?
• BigInt?
• Security parse untrusted?

• Parse without try/catch
• Assuming Date auto-revives
• Circular structure stringify error

Persist todos to localStorage with JSON.stringify.

Returns string labels: undefined, boolean, string, number, bigint, symbol, function, object. typeof null is ‘object’ (historical bug).

typeof 42; // 'number'
typeof null; // 'object'
typeof (() => {}); // 'function'

• typeof array?
• Safe typeof undeclared?
• undefined vs undeclared?

• Checking arrays with typeof only
• typeof null as object confusion
• typeof NaN

Guard API fields: typeof fn === ‘function’ before calling callback.

Returns true if prototype of constructor appears in object’s chain. Useful for built-ins and custom classes; fragile across realms/iframes.

[] instanceof Array; // true
({}) instanceof Object; // true

• instanceof vs Array.isArray?
• Symbol.hasInstance?
• Cross-realm?

• instanceof for primitives
• Array.isArray forgotten
• Custom inheritance breaks instanceof

Use Array.isArray on API JSON before map.

?? returns right side only when left is null or undefined, not other falsy values.

const port = config.port ?? 3000;
const name = input ?? 'Guest';
0 ?? 5; // 0

• ?? vs ||?
• Mixing with && without parens?
• Default params?

• || when 0 is valid
• Precedence bugs with &&
• ?? with undefined only confusion

Pagination page 0 must use ?? not || for default page.

?. stops evaluation and returns undefined if base is null/undefined before property, call, or bracket access.

const city = user?.address?.city;
const len = arr?.length;
obj?.method?.();

• ?. with calls?
• Combining with ??
• Performance?

• Optional chain instead of validation
• ?. on guaranteed values overuse
• Bracket optional chaining syntax

Render profile city without crashing when address missing from API.

function* yields values lazily. Returns iterator with next(). Useful for infinite sequences and custom iteration.

function* ids() {
  let i = 0;
  while (true) yield i++;
}
const gen = ids();
gen.next().value; // 0

• yield* delegation?
• Generators vs async?
• for..of over generator?

• Generator without calling next
• Confusing with async function*
• Infinite generator without take limit

Paginate API with generator yielding pages until empty.

Symbol() creates unique identifiers, useful for meta keys and avoiding name clashes. Well-known symbols like Symbol.iterator customize behavior.

const id = Symbol('id');
const user = { [id]: 42, name: 'Sam' };
Object.keys(user); // ['name'] only

• Symbol.for?
• JSON serialization?
• iterator symbol?

• Expecting Symbol in JSON
• Symbol as string key typo
• Overusing Symbol everywhere

Library adds hidden metadata with Symbol so it does not collide with user keys.

WeakMap keys must be objects, held weakly (no prevent GC). WeakSet stores objects weakly. Not iterable.

const wm = new WeakMap();
let el = document.createElement('div');
wm.set(el, { clicks: 0 });

• WeakMap vs Map?
• Primitive keys?
• Use cases?

• Trying to iterate WeakMap
• Expecting size property reliably
• Using WeakMap as general cache

Attach private data to DOM nodes without expanding global registries.

Each time code runs, an execution context is created with variable environment, lexical environment, and this binding. Call stack holds contexts for nested calls.

function outer() {
  const a = 1;
  function inner() { console.log(a); }
  inner();
}
outer();

• Creation vs execution phase?
• Global vs function context?
• ES6 block context?

• Confusing context with scope object only
• this in nested arrow
• Stack overflow recursion

Explaining why inner function sees a is lexical environment + context.

Arrows have no own this, arguments, super, or new.target. Cannot be constructors. Concise syntax; implicit return for expressions.

const obj = {
  n: 1,
  regular() { return this.n; },
  arrow: () => this, // lexical this (often window)
};

• Arrow in object methods?
• Arrow as constructor?
• Returning objects with implicit return?

• Arrow object methods losing this
• new Arrow()
• Implicit return { key: 1 } needs parens

Use regular methods in class/object; arrows for callbacks needing lexical this.

Backtick strings support ${expression} interpolation and multiline text without concatenation.

const name = 'Lee';
const msg = `Hello, ${name}!
Welcome.`;

• Tagged templates?
• Nesting ${}?
• Security XSS?

• HTML injection in templates
• Using quotes instead of backticks
• Forgetting escape in user HTML

Build email preview strings with multiline templates in a Node script.

Default values apply when argument is undefined (not necessarily for null). Can use expressions evaluated at call time.

function greet(name = 'Guest', punct = '!') {
  return `Hi ${name}${punct}`;
}
greet(undefined, '!!');

• null vs undefined defaults?
• TDZ in defaults?
• Default object literals?

• || defaults when 0 valid
• Mutable default object shared
• Parameter order mistakes

API wrapper function sets default timeout ms for fetch helper.

In object destructuring, …rest gathers leftover own enumerable properties into a new object.

const { password, ...safeUser } = user;
console.log(safeUser); // no password field

• rest must be last?
• rest in arrays?
• Shallow copy via rest?

• rest before other props
• Expecting deep omit
• Renaming and rest confusion

Strip sensitive fields before logging user object to analytics.

Declarations: function name() {} — hoisted wholly. Expressions: const fn = function() {} or arrow — follow variable hoisting rules.

foo();
function foo() {}
// bar(); // error
const bar = () => {};

• Named function expression?
• Anonymous vs named for stacks?
• Conditional declarations?

• Using expression before line
• function if(true){} pitfalls in blocks
• Mixing forms inconsistently

Put hoisted helpers as declarations or define expressions before use in modules.

then returns a new Promise, allowing sequential async steps. Return values wrap in resolved Promise; thrown errors reject.

return fetch('/a')
  .then(r => r.json())
  .then(data => fetch(`/b/${data.id}`))
  .then(r => r.json());

• then vs catch order?
• Returning promises inside then?
• Anti-pattern nested then?

• Nested then pyramids
• Forgot return Promise in then
• Swallowing errors

Chain token refresh then retry original request in auth interceptor story.

slice returns a shallow copy portion without mutating. splice mutates array by removing/replacing/adding elements.

const a = [1,2,3,4];
a.slice(1,3); // [2,3], a unchanged
a.splice(1,2,'x'); // mutates a

• Negative slice index?
• splice return value?
• Copy array best practice?

• splice when slice intended
• Mutating shared state array
• slice on string vs substring

Immutable update: use slice/spread instead of splice on Redux state.

‘use strict’ enables stricter parsing and runtime: no implicit globals, duplicate params error, this undefined in plain calls, etc.

'use strict';
function f() { console.log(this); }
f(); // undefined

• Modules strict by default?
• delete non-configurable?
• Octal literals?

• Strict in only one file mixed bundle
• Deleting variables
• with statement in strict

ES modules are strict — explains why top-level this is undefined.

undefined means missing or uninitialized. null is an intentional empty value. typeof null is object; typeof undefined is undefined.

let x;
console.log(x); // undefined
const y = null;

• JSON null?
• Default params undefined?
• == null check?

• Using both interchangeably in APIs
• Not documenting which API returns
• null prototype confusion

Document whether your API uses null or omits keys for missing optional fields.

Use spread […arr], slice(), Array.from(arr), or toSorted/toReversed for non-mutating variants.

const copy = [...items];
const sorted = [...items].sort((a,b)=>a-b);
// or items.toSorted() in modern JS

• Shallow array copy?
• Nested arrays?
• structuredClone?

• sort() mutating original
• Assigning reference only
• Deep nested copy forgotten

Add item: setItems([…items, newItem]) in React.

Attach one listener on parent; use event.target to handle children. Works with dynamic nodes and fewer listeners.

document.querySelector('#list').addEventListener('click', (e) => {
  if (e.target.matches('button.delete')) { /* ... */ }
});

• Propagation phases?
• matches vs closest?
• Performance?

• Listener per row on big tables
• Wrong target without closest
• Stopping propagation too aggressively

Todo list: one listener on ul instead of per li button.

Module pattern uses closures/IIFE to hide private state and expose public API. ES modules use import/export with static structure and browser/Node support.

// ES module
export function createStore() { let s = 0; return { inc: () => ++s }; }

• CJS vs ESM?
• Dynamic import?
• Tree shaking?

• Mixing patterns in one file
• Expecting IIFE private fields in ESM without closure
• Circular deps unhandled

Migrate school script tags to Vite ESM for clearer dependencies.