JS Module

Preview

1. What is a JS module and how does it differ from a regular JS script?
2. What are some benefits of using JS modules in web development?
3. How do you declare and export functions or variables in a JS module?
4. How can you import a JS module into another JS file or script?
5. How do you manage dependencies between multiple JS modules?

Explain

A JS module is a self-contained block of code that performs a specific task or defines a specific functionality. It enables the encapsulation of code, which facilitates better organization, easier maintenance and reuse.

An example of a JS module would be a library that provides a set of utility functions, such as validation of email addresses, formatting of dates or calculation of math operations. Here is a basic example of a utility function as a module in JavaScript:

// Define a module that returns the sum of two numbers
const sumModule = (function() {
  function add(a, b) {
    return a + b;
  }
  return { add };
})();

// Use the module by calling the function
console.log(sumModule.add(5, 3)); // Output: 8

In this example, the sumModule encapsulates the add() function, which returns the sum of two numbers. The module is defined using an IIFE (Immediately-invoked Function Expression), which immediately executes the enclosed function and returns an object containing the add() function. The sumModule object can be then used to call the add() function, which computes the sum of two numbers.

Keypoint

• Modules are a way of organizing code in JavaScript to make it more modular and reusable.
• Modules offer encapsulation, so that variables and functions inside a module are not accessible outside the module, preventing naming collisions and other issues.
• There are two types of modules: ES6 modules and CommonJS modules.
• ES6 modules use the import and export keywords to define and use modules.
• CommonJS modules use the require() function to load modules and the module.exports object to define modules.
• Modules can be used to load other modules, making it easy to build complex applications from smaller, reusable parts.
• Modules are an important part of modern JavaScript development, and many libraries and frameworks rely on them to organize code and facilitate collaboration.

Review

1. What is a JS module and how does it differ from traditional scripts?

• A JS module is a set of code that can be reused in multiple locations without affecting other code in the same file. It is different from traditional scripts in that each module has its own scope, and it can be imported and exported to other modules as needed.

2. How do you import a module in JavaScript?

• To import a module in JavaScript, you can use the ‘import’ keyword followed by the name of the module you want to import. For example: ‘import { myFunction } from ‘./myModule’;’.

3. What are the benefits of using JS modules in a project?

• JS modules can help make code more modular and easier to maintain by breaking it up into smaller, reusable pieces. They can also improve performance by only loading the modules that are needed for a specific piece of code.

4. Can you have multiple exports in a single JS module?

• Yes, a single JS module can have multiple exports by using the ’export’ keyword before each export. For example: ’export const myConstant = ‘Hello world’; export function myFunction() { // code here }’.

5. How do you create a default export in a JS module?

• To create a default export in a JS module, you can use the ’export default’ keyword followed by the value you want to export. For example: ‘const myVariable = ‘Hello world’; export default myVariable;’.