JavaScript Modules 5 — Questions and Answers
Question 1: What is tree shaking in the context of ES modules?
- A process of reordering module evaluation for performance
- Dead-code elimination of unused exports by bundlers (Correct answer)
- Removing circular dependencies automatically
- Shaking out global variable leaks from modules
Correct answer: Dead-code elimination of unused exports by bundlers
Tree shaking leverages ES module static structure to detect and remove unused exports, reducing bundle size.
Question 2: What does `export { foo as default }` accomplish?
- Creates a named export called 'default'
- Makes `foo` the default export of the module (Correct answer)
- Exports `foo` and prevents named access
- Throws a syntax error
Correct answer: Makes `foo` the default export of the module
`export { foo as default }` is equivalent to `export default foo` and designates `foo` as the module's default export.
Question 3: Which statement correctly describes live bindings in ES modules?
- Imported values are deep-frozen snapshots
- Imported bindings reflect the current value of the export, even if it changes after import (Correct answer)
- Imported values are copied by value at import time
- Live bindings only apply to function exports
Correct answer: Imported bindings reflect the current value of the export, even if it changes after import
ES module exports are live bindings, meaning the imported name always reflects the latest value of the exported variable.
Question 4: What is the purpose of the `modulepreload` link relation?
- Preloads CSS modules before rendering
- Instructs the browser to fetch and parse an ES module early to improve performance (Correct answer)
- Defers module loading until user interaction
- Registers a service worker module
Correct answer: Instructs the browser to fetch and parse an ES module early to improve performance
`<link rel="modulepreload">` tells the browser to fetch, parse, and compile an ES module in advance, reducing latency.
Question 5: What error occurs if you try to assign to an imported binding?
- TypeError at runtime
- A SyntaxError at parse time because imports are read-only (Correct answer)
- The assignment silently fails
- The export in the source module is also updated
Correct answer: A SyntaxError at parse time because imports are read-only
Imported bindings are read-only; attempting to assign to them causes a SyntaxError during parsing.
Question 6: Which Node.js built-in module function can be used to get `__dirname` equivalent inside an ES module?
- path.dirname(__filename)
- new URL('.', import.meta.url).pathname (Correct answer)
- require.resolve('.')
- module.dirname
Correct answer: new URL('.', import.meta.url).pathname
Since `__dirname` is not available in ES modules, `new URL('.', import.meta.url).pathname` provides the equivalent directory path.
Question 7: What is the difference between `export const x = 1` and `const x = 1; export { x }`?
- The first creates a live binding; the second creates a snapshot
- They are functionally equivalent (Correct answer)
- The second form creates a separate copy of x for export
- The first form cannot be used with `let` or `var`
Correct answer: They are functionally equivalent
Both syntaxes produce the same result — a named live binding export of `x` — and are interchangeable.
JavaScript Modules 5
What is tree shaking in the context of ES modules?