JavaScript ES Modules Interview Questions

Named exports and imports

// math.js — named exports
export const PI = 3.14159

export function add(a, b) { return a + b }
export function multiply(a, b) { return a * b }

// Can also export declarations separately:
const subtract = (a, b) => a - b
const divide   = (a, b) => a / b
export { subtract, divide }

// Rename on export:
export { subtract as sub, divide as div }

// ─── Importing ───────────────────────────────────
// Named import — must match exported name
import { add, multiply } from './math.js'
add(2, 3)        // 5
multiply(2, 3)   // 6

// Rename on import:
import { add as sum } from './math.js'
sum(2, 3)  // 5

// Namespace import — everything under one object:
import * as math from './math.js'
math.add(2, 3)  // 5
math.PI         // 3.14159

Default exports

// user.js — one default export per module
export default class User {
  constructor(name) { this.name = name }
  greet() { return `Hi, I'm ${this.name}` }
}

// utils.js — function as default
export default function formatDate(date) {
  return date.toLocaleDateString('en-GB')
}

// ─── Importing default ────────────────────────────
// No curly braces — name it whatever you want
import User       from './user.js'
import formatDate from './utils.js'
import MyUser     from './user.js'  // different name — fine

// Default + named in one import:
// api.js
export default function fetchUser() { ... }
export const BASE_URL = 'https://api.example.com'

import fetchUser, { BASE_URL } from './api.js'

ESM is statically analysed — this changes everything

ES Module imports are not executable code — they're declarations. The module graph is resolved before any code runs. This is what enables tree-shaking, circular dependency detection, and type checking.

// ✓ Valid — import declarations are hoisted and resolved statically
import { add } from './math.js'

// ❌ Invalid — you can't conditionally import in ESM
if (condition) {
  import { add } from './math.js'  // SyntaxError
}

// ❌ Invalid — import path must be a string literal
const path = './math.js'
import { add } from path  // SyntaxError

// ✓ For dynamic imports, use import() — a function, not a declaration
if (condition) {
  const { add } = await import('./math.js')  // dynamic — returns a Promise
}

Live bindings — the critical ESM distinction

ESM exports are live bindings, not copies. If a module updates an exported variable, all importers see the new value. This is fundamentally different from CommonJS, which copies values.

// counter.js
export let count = 0
export function increment() { count++ }

// main.js
import { count, increment } from './counter.js'

console.log(count)  // 0
increment()
console.log(count)  // 1 — sees the update! Live binding.
count = 5           // TypeError: Assignment to constant variable
                    // Importers can READ live bindings but not REASSIGN them

Dynamic import() — code splitting and lazy loading

// import() returns a Promise for the module's namespace object
// Loads the module only when the code runs, not at parse time

// Lazy load a heavy component:
async function loadEditor() {
  const { Editor } = await import('./Editor.js')
  document.body.appendChild(new Editor().render())
}

// Conditional loading — load polyfill only if needed:
async function init() {
  if (!window.IntersectionObserver) {
    await import('intersection-observer')  // polyfill
  }
  startApp()
}

// Route-based code splitting (React):
const Dashboard = React.lazy(() => import('./Dashboard'))
const Settings  = React.lazy(() => import('./Settings'))
// Dashboard.js is not downloaded until Dashboard is rendered

// Dynamic path (with variable):
async function loadLocale(lang) {
  const { messages } = await import(`./locales/${lang}.js`)
  return messages
}
// Note: bundlers can statically analyse template literals with limited dynamic parts

CommonJS vs ESM — the differences that matter in practice

// ─── CommonJS (Node.js legacy) ───────────────────────
const path = require('path')              // synchronous, blocking
const { readFile } = require('fs')        // copies the value at require() time
module.exports = { myFunction }           // single exports object
module.exports = function() {}            // replace entire exports

// require() can appear anywhere, anytime — even inside functions or conditionals
function loadPlugin(name) {
  return require(`./plugins/${name}`)     // dynamic path — works in CJS
}

// ─── ES Modules ──────────────────────────────────────
import path from 'path'                  // asynchronous, static declaration
import { readFile } from 'fs/promises'   // live binding
export { myFunction }                    // named export

// In Node.js, to use ESM:
// Either use .mjs extension or set "type": "module" in package.json
// Cannot mix require() and import in the same file

Circular dependencies — what actually happens

// a.js
import { b } from './b.js'
export const a = 'A'
console.log('a sees b:', b)  // may be undefined — depends on evaluation order

// b.js
import { a } from './a.js'
export const b = 'B'
console.log('b sees a:', a)  // 'A' — if a.js was evaluated first

// ESM handles circular imports: the bindings exist but may be uninitialized
// at the time first code runs. They fill in as modules evaluate.
// The fix: move shared code to a third module that neither a.js nor b.js imports

Module patterns — before and after native modules

// IIFE module pattern (pre-ESM — 2010 era)
const Counter = (function() {
  let count = 0  // private — not accessible outside
  return {
    increment() { count++ },
    getCount()  { return count }
  }
})()

Counter.increment()
Counter.getCount()  // 1
Counter.count       // undefined — private

// AMD (RequireJS — browser async loading before ESM)
define(['jquery', 'underscore'], function($, _) {
  return { myFunction() { ... } }
})

// UMD — works as AMD, CommonJS, or global (legacy libraries)
;(function(root, factory) {
  if      (typeof define === 'function' && define.amd) define(factory)
  else if (typeof module !== 'undefined') module.exports = factory()
  else    root.myLibrary = factory()
})(this, function() { return { ... } })

// Modern ESM — all of the above replaced by:
// export / import — that's it

Tree shaking — why named exports matter

// utils.js — named exports
export function formatDate(d)  { ... }  // 2kb
export function formatCurrency(n) { ... }  // 3kb
export function parseCSV(str) { ... }   // 8kb

// main.js — only imports formatDate
import { formatDate } from './utils.js'

// Bundler (Webpack/Rollup/Vite) statically sees that only formatDate is used
// formatCurrency and parseCSV are excluded from the bundle — tree-shaken
// Final bundle: only 2kb for this module, not 13kb

// ❌ Anti-pattern — barrel re-exports with side effects prevent tree shaking
// index.js (barrel)
export * from './formatDate'
export * from './formatCurrency'
export * from './parseCSV'
import './setupPolyfills'  // side effect — bundler must include all exports

// ✓ Better: import directly from the specific file
import { formatDate } from './utils/formatDate'