Skip to main content

JavaScript Modules

JavaScript modules are a way to organize and share code between files, improving code organization, reusability, and maintainability. Before modules, JavaScript code in different files could easily cause conflicts due to global variables and functions. Modules provide a way to avoid these issues by encapsulating code within separate files, which can be exported and imported as needed. In this tutorial, we'll introduce you to JavaScript modules and learn how to create and use them.

Named Exports and Imports​

Named exports and imports allow you to share multiple values from a module and give them specific names.

Exporting Named Values​

To create a named export, use the export keyword before the function, class, or variable declaration:

mathFunctions.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

In this example, we export two functions, add and subtract, as named exports from the mathFunctions.js module.

Importing Named Exports​

To import named exports, use the import keyword followed by the names of the exported values enclosed in curly braces:

app.js
import { add, subtract } from './mathFunctions.js';

console.log(add(10, 5)); // Output: 15
console.log(subtract(10, 5)); // Output: 5

In this example, we import the named exports add and subtract from the mathFunctions.js module.

Aliasing Named Exports​

If you want to use a different name for an imported value, you can use the as keyword to create an alias:

app.js
import { add as addition, subtract as subtraction } from './mathFunctions.js';

console.log(addition(10, 5)); // Output: 15
console.log(subtraction(10, 5)); // Output: 5

In this example, we import the named exports add and subtract with aliases addition and subtraction, respectively.

Importing Multiple Named Exports​

To import multiple named exports at once, separate them with commas inside the curly braces:

app.js
import { add, subtract, multiply, divide } from './mathFunctions.js';

console.log(add(10, 5)); // Output: 15
console.log(subtract(10, 5)); // Output: 5
console.log(multiply(10, 5)); // Output: 50
console.log(divide(10, 5)); // Output: 2

Default Exports​

Default exports allow you to export a single value from a module without specifying a name, making it easier to use in other parts of your application.

Exporting a Default Value​

To create a default export, use the export default keyword before the function, class, or variable declaration:

square.js
export default function square(x) {
  return x * x;
}

In this example, we export a square function as the default export from the square.js module. Unlike named exports, you don't need to use curly braces when importing a default export.

Importing a Default Export​

To import a default export, use the import keyword followed by the name you want to assign to the imported value:

app.js
import squareFunction from './square.js';

console.log(squareFunction(5)); // Output: 25

In this example, we import the default export from the square.js module and assign it the name squareFunction. You can choose any name you like when importing a default export.

Mixing Named and Default Exports​

You can also use both named and default exports in the same module:

math.js
export function add(a, b) {
  return a + b;
}

export default function subtract(a, b) {
  return a - b;
}

In this example, we have a named export add and a default export subtract in the math.js module.

To import both named and default exports, use the import keyword with the default export before the named exports:

app.js
import subtract, { add } from './math.js';

console.log(add(10, 5)); // Output: 15
console.log(subtract(10, 5)); // Output: 5

Importing and Exporting Objects​

In JavaScript modules, you can also import and export objects. This can help you group related values together, making your code more organized and maintainable.

Exporting Objects​

To export an object, define an object with its properties and use the export keyword:

mathFunctions.js
const mathFunctions = {
  add: function (a, b) {
    return a + b;
  },
  subtract: function (a, b) {
    return a - b;
  },
};

export { mathFunctions };

In this example, we define an object mathFunctions with two methods, add and subtract. Then, we export the object using the export keyword.

Importing Objects​

To import an object, use the import keyword followed by the object name enclosed in curly braces:

app.js
import { mathFunctions } from './mathFunctions.js';

console.log(mathFunctions.add(10, 5)); // Output: 15
console.log(mathFunctions.subtract(10, 5)); // Output: 5

In this example, we import the mathFunctions object from the mathFunctions.js module and use its methods in our app.js file.

Importing and Exporting Objects with Default Exports​

You can also use default exports to export and import objects:

mathFunctions.js
const mathFunctions = {
  add: function (a, b) {
    return a + b;
  },
  subtract: function (a, b) {
    return a - b;
  },
};

export default mathFunctions;

To import a default exported object, you don't need to use curly braces:

app.js
import mathFunctions from './mathFunctions.js';

console.log(mathFunctions.add(10, 5)); // Output: 15
console.log(mathFunctions.subtract(10, 5)); // Output: 5

Conclusion​

In this tutorial, we introduced you to JavaScript modules, which are a way to organize and share code between files. Modules help improve code organization, reusability, and maintainability by encapsulating code within separate files that can be imported and exported as needed. By using modules, you can create more maintainable and scalable JavaScript applications.