JavaScript Modules Quiz

Assess your understanding of JavaScript modules, including import/export syntax, module advantages, scope, and related concepts essential in frontend development.

1. Importing a Named Export

   Which statement correctly imports a named export 'calculate' from a file called 'math.js'?

   1. import { calculate } from './math.js';
   2. import './math.js' as calculate;
   3. require('calculate') from './math.js';
   4. import calculate from './math.js';

   Explanation: The correct syntax for importing a named export is using curly braces. Option B is the default import syntax and only works if 'calculate' is exported as default. Option C is invalid syntax. Option D uses CommonJS syntax, not ES modules.

2. Default Export Identification

   Which keyword is used to define a default export in a JavaScript module?

   1. main
   2. exportDefault
   3. primary
   4. default

   Explanation: The 'default' keyword is used with 'export' to designate the default export. The other options are not recognized JavaScript keywords for exporting modules.

3. Module Scope

   How does module-level scope in JavaScript modules differ from script-level scope?

   1. Module scope only restricts functions, not variables.
   2. Variables in a module are always global.
   3. Variables declared in a module are not added to the global scope.
   4. Modules automatically inherit all global variables.

   Explanation: Module scope means variables declared in a module are private to that module by default. Option B is incorrect because variables are not global. Option C is false; modules do not automatically inherit globals. Option D wrongly claims only functions are restricted.

4. Module Advantages

   What is a main benefit of using JavaScript modules in frontend development?

   1. They automatically compress files.
   2. They guarantee faster browser loading.
   3. They help organize code and reduce naming conflicts.
   4. They remove all syntax errors.

   Explanation: Modules enable better code organization and encapsulation, reducing conflicts. Compression requires separate tools. Load times aren't guaranteed by modules alone. Syntax errors still need fixing by the developer.

5. Re-exporting from a Module

   Which statement re-exports all exports from 'utils.js' in a new module?

   1. require('./utils.js');
   2. export default from './utils.js';
   3. export * from './utils.js';
   4. import * from './utils.js';

   Explanation: 'export * from' syntax re-exports everything. Option B is for default exports and invalid here. Option C is an import statement, not export. Option D uses CommonJS, not ES modules.

6. Importing All Named Exports

   How do you import all named exports from 'helpers.js' as a single object called 'helpers'?

   1. import helpers from './helpers.js';
   2. require('./helpers.js').helpers;
   3. import all helpers from './helpers.js';
   4. import * as helpers from './helpers.js';

   Explanation: 'import * as helpers' gathers all named exports under the 'helpers' namespace. Option B imports a default export, not all exports. Option C is invalid syntax. Option D uses CommonJS, which is not ES module syntax.

7. Side Effects of Module Imports

   What happens if you import a module solely for its side effects, without importing any bindings?

   1. You must always import at least one binding.
   2. The module is ignored and not executed.
   3. import './module.js'; runs the module's top-level code.
   4. It raises a syntax error in the browser.

   Explanation: Importing a module without bindings still executes its top-level code. Option B is false; the code does run. Option C is incorrect; imports can be just for side effects. Option D is wrong; this is valid syntax in ES modules.

8. File Extension Requirement

   When importing a local module in a browser ES module environment, what file extension is required?

   1. No extension needed
   2. .module
   3. .mjs
   4. .js

   Explanation: Browsers generally require the '.js' extension for module imports. '.module' is not recognized. '.mjs' is used in Node.js but less common in browsers. Omitting the extension usually results in an error.

9. Multiple Exports from a Module

   Which statement is true of exporting multiple functions from a JavaScript module?

   1. Modules can only have one export.
   2. You can use multiple named exports in a module.
   3. Only one function per module is allowed.
   4. All exported functions must be default.

   Explanation: JavaScript modules support multiple named exports, making them flexible. The other options are incorrect: there is no one-export or one-function-per-module limitation, and functions do not have to be default exports.

10. Dynamic Import Syntax

    How do you dynamically import a module in JavaScript at runtime?

    1. import myModule from './myModule.js'
    2. import('./myModule.js')
    3. export { default } from './myModule.js'
    4. require('myModule.js')

    Explanation: The dynamic import syntax uses 'import()' as a function that returns a promise. 'require' is not valid in browser ES modules. The third option uses static import syntax, and the fourth is an export statement.