JavaScript Modules 4 — Questions and Answers
Question 1: What is an import map used for in browser-based ES modules?
- Mapping CSS imports to stylesheets
- Resolving bare module specifiers to URLs (Correct answer)
- Caching module responses in the browser
- Defining module load order
Correct answer: Resolving bare module specifiers to URLs
An import map is a JSON configuration that tells the browser how to resolve bare specifiers like `'react'` to actual URLs.
Question 2: When using dynamic import inside an async function, which pattern is correct?
- const mod = import('./mod.js');
- const mod = await import('./mod.js'); (Correct answer)
- const mod = sync import('./mod.js');
- const { default: mod } = import('./mod.js');
Correct answer: const mod = await import('./mod.js');
Since `import()` returns a Promise, you must `await` it inside an async function to get the module namespace object.
Question 3: Which statement about ES module scope is correct?
- All top-level variables are added to the global `window` object
- Each module has its own scope; top-level variables are not global (Correct answer)
- Modules share a single global scope per page
- Variables declared with `var` in a module become global
Correct answer: Each module has its own scope; top-level variables are not global
ES modules have their own scope, so top-level declarations do not pollute the global namespace.
Question 4: What happens when two modules import the same module in ES modules?
- Each import creates a fresh module instance
- The module is evaluated once and the same instance is shared (Correct answer)
- The second import throws a duplicate module error
- The module is evaluated twice but exports are merged
Correct answer: The module is evaluated once and the same instance is shared
The module system caches modules after the first evaluation, so all importers share the same module instance.
Question 5: Which syntax is used to conditionally load a module based on a runtime condition?
- if (condition) import './mod.js';
- const mod = condition ? await import('./mod.js') : null; (Correct answer)
- import('./mod.js') if condition;
- require.if(condition, './mod.js');
Correct answer: const mod = condition ? await import('./mod.js') : null;
Dynamic `import()` can be used inside expressions and conditionals, making it suitable for conditional or lazy loading.
Question 6: What does the `type: 'module'` field in package.json do in Node.js?
- Enables TypeScript support for the package
- Treats all `.js` files in the package as ES modules (Correct answer)
- Makes `require()` unavailable in the package
- Disables CommonJS for the entire Node.js process
Correct answer: Treats all `.js` files in the package as ES modules
Setting `"type": "module"` in package.json makes Node.js treat `.js` files as ES modules instead of CommonJS.
Question 7: Which of the following is a valid way to access the default export from a dynamic import?
- const mod = await import('./mod.js'); mod.default;
- const { default: MyClass } = await import('./mod.js');
- Both A and B are valid (Correct answer)
- Neither A nor B; you must use require()
Correct answer: Both A and B are valid
Both `mod.default` and destructuring with renaming (`{ default: MyClass }`) are valid ways to access the default export from a dynamic import.
JavaScript Modules 4
What is an import map used for in browser-based ES modules?