yoklainterview sim
ProgressHistory

Frontend Javascript Modules Bundling Interview Questions

75 verified Frontend Javascript Modules Bundling interview questions — solve with answers, learn from explanations, test yourself in a real simulation.

Try the real simulation →

Sample questions

Javascript Modules BundlingDifficulty 1
What is the key difference between a named export and a default export in ES modules?
  • aNamed exports can only export functions, default exports can export any value
  • bA module can have unlimited default exports but only one named export
  • cDefault exports require the export keyword to be written twice
  • dA module can have multiple named exports but only one default export✓
Explanation:ES modules support two independent export mechanisms in the same file: any number of named exports (imported with { name }, matching the exported identifier) and at most one default export (imported with any local name, e.g. import whatever from './mod.js').
Javascript Modules BundlingDifficulty 1
In CommonJS, what is the correct way to export a single object from a module?
  • aAssign the object to module.exports✓
  • bUse the export default keyword
  • cCall module.export(obj) as a function
  • dReturn the object from the top level of the file
Explanation:CommonJS has no export/export default keywords — the module's public interface is whatever value is assigned to module.exports (or its properties, via the exports shorthand).
Javascript Modules BundlingDifficulty 2
// math.js
export const add = (a, b) => a + b;
export const BASE = 10;

// main.js
import { add, BASE } from './math.js';
console.log(add(2, BASE));

What does this log?
  • aNaN
  • bundefined
  • c12✓
  • dSyntaxError: Unexpected token 'export'
Explanation:Both add and BASE are named exports, imported by their exact names. add(2, BASE) evaluates to add(2, 10), which returns 12.
Javascript Modules BundlingDifficulty 2
// util.js
export default function greet(name) {
  return `Hello, ${name}`;
}

// main.js
import sayHi from './util.js';
console.log(sayHi('Ada'));

What does this log?
  • aundefined
  • bHello, Ada✓
  • cA SyntaxError because the imported name doesn't match the exported function's name
  • dgreet('Ada')
Explanation:A default export can be imported under any local name — sayHi is just a local alias chosen by the importer for the default-exported greet function. Calling it returns Hello, Ada.
Javascript Modules BundlingDifficulty 1
Which statement is true about using import/export syntax directly in a browser <script> tag?
  • aIt works in any <script> tag without configuration
  • bThe <script> tag needs type="module"✓
  • cimport/export only work inside Web Workers, not regular pages
  • dThe script must be inlined; module scripts cannot use the src attribute
Explanation:Browsers only treat a <script> as an ES module — enabling top-level import/export — when it's marked type="module". A plain <script> treats import/export as a syntax error.
Javascript Modules BundlingDifficulty 2
// colors.js
export const red = '#f00';
export const blue = '#00f';

// main.js
import * as colors from './colors.js';
console.log(colors.red, Object.keys(colors).length);

What does this log?
  • a#f00, 1
  • bundefined, 2
  • cTypeError: colors is not an object
  • d#f00, 2✓
Explanation:import * as colors collects all named exports into a namespace object. colors.red is '#f00', and the namespace has 2 keys (red, blue).

By specialization

Angular 450JavaScript 450React 450TypeScript 450Vue 450

By seniority

Frontend JuniorFrontend MidFrontend Senior

Other fields

BackendFullstackDevOps / CloudAI EngineerDatabaseMobileSecurityQA / Test AutomationData EngineerGame DevelopmentML Engineer

Test yourself against the 2925-question Frontend bank.

Start interview