Search⌘ K
AI Features
Home
Courses
Learn HTML, CSS, and JavaScript

Modules in JavaScript

Explore how JavaScript modules help you organize and reuse code efficiently. Learn to use ES6 export and import features, distinguish between named and default exports, and improve your code's maintainability and clarity through modularization.

We'll cover the following...

JavaScript modules are reusable, encapsulated pieces of code that can be imported or exported between files. They help organize large codebases into smaller, manageable parts, improving readability and maintainability. Modules also prevent variable and function name conflicts by creating separate scopes.

Exporting in JavaScript

Exports allow us to make functions, objects, or variables available to other modules. There are two main types of exports:

  • Named exports: Allow us to export multiple items by name.

  • Default export: Allow us to export a single item as the default for the module.

// Named exports
export const name = "JavaScript";
export function greet() {
    console.log("Hello!");
}
// Default export
const version = "ES6";
export default version;
Syntax for exporting modules

Importing in JavaScript

Imports allow us to use code from other modules in the ...