Modules in JavaScript MCQs

1. What Are Modules?

Modules in JavaScript are files that encapsulate related code. Each module typically defines specific functionality and can export it for use in other files. This is a key feature in modern JavaScript development.

• They help split large codebases into smaller, manageable pieces.
• Modules can export functions, objects, classes, or variables.
• Other files can import what they need, without polluting the global scope.

2. Benefits of Using Modules

• Better Code Organization: Code is separated into logical units based on functionality.
• Reusability: Functions or components can be reused across multiple files or projects.
• Encapsulation: Variables and functions stay scoped to the module unless explicitly exported.
• Maintainability: Smaller files are easier to debug, test, and update.
• Collaboration: Teams can work on different modules independently.

3. ES6 Module Syntax

Exporting

There are two types of exports:

• Named Exports – Allows multiple exports per file.
• Default Export – Allows one default export per file.

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// Grouped named export
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;
export { multiply, divide };

// Default export
export default function sayHello() {
  console.log("Hello!");
}

Importing

You can import what you need from another file:

// app.js
import { add, subtract } from './math.js'; // Named imports
import sayHello from './math.js';          // Default import

console.log(add(5, 3));   // 8
sayHello();               // Hello!

4. Module Types in JavaScript

• ES6 Modules (ESM): Modern standard, supported in browsers and newer Node.js versions.
• CommonJS (CJS): Used primarily in Node.js (before ES modules were supported).

Example: CommonJS

// math.js (CommonJS format)
function add(a, b) {
  return a + b;
}
module.exports = { add };

// app.js
const math = require('./math.js');
console.log(math.add(10, 2)); // 12

5. Using Modules in Browsers

To use modules in browser-based JavaScript, include type="module" in your script tag:

<script type="module" src="main.js"></script>

This enables the use of import and export in the browser. Note that modules follow strict mode automatically and use CORS policies when importing external files.

6. Notes and Best Practices

• Keep related logic in the same module.
• Avoid circular dependencies (module A importing B while B imports A).
• Use default exports for primary functionality, named exports for helpers/utilities.
• Use tools like Webpack, Vite, or Rollup in real projects to bundle modules efficiently.

Modules in JavaScript

1. What is the purpose of the 'export' keyword in ES6 modules?

2. What does the 'import' keyword do in ES6 modules?

3. What is the main difference between CommonJS and ES6 modules?

4. What is a default export in ES6 modules?

5. What are named exports in ES6 modules?

6. How do ES6 modules differ from CommonJS modules in terms of loading?

7. Can you have both named exports and a default export in the same module?

8. What can happen with circular dependencies in ES6 modules?

9. How do you import a default export in ES6 modules?

10. How do you import named exports from a module?

11. How can you load ES6 modules in your JavaScript code?

12. What is a module in JavaScript?

13. How do you define a default export in an ES6 module?

14. Why are named exports called 'named' exports?

15. What does the export * from 'module' syntax do?

16. Why are modules important in JavaScript?

17. What file extension do ES6 modules typically use?

18. How can you include an ES6 module in an HTML file?

19. Why might developers use a bundler with ES6 modules?

20. What does the .mjs file extension signify?