Node.js
module.exports vs export default: Node.js & ES6 Guide
This article explores the differences and use cases of module.exports and export default in Node.js and ES6, helping you choose the right approach for your JavaScript modules.
This article explores the differences and use cases of module.exports and export default in Node.js and ES6, helping you choose the right approach for your JavaScript modules.
In JavaScript, modules are like reusable building blocks of code. They let you organize your code into separate files and use functions, classes, or variables from one file in another. Two important concepts for working with modules are module.exports and export default. This article will explain the differences between these two, their history, when to use each, and how they work.
This explanation breaks down the differences between module.exports and export default in JavaScript, covering their origins, use cases, and how they interact.
1. Historical Context: CommonJS vs. ES Modules
CommonJS (module.exports): This system originated in Node.js for handling modules. It predates the standardized JavaScript module system (ES Modules).
ES Modules (export/import): This is the official JavaScript standard for modules, introduced in ES6 (ES2015). It offers a more flexible and feature-rich way to work with modules.
2. module.exports in CommonJS
In CommonJS, module is a special object representing the current module.
module.exports is an object exposed by this module. Whatever you assign to it becomes the module's exported value.
// myModule.js
function greet(name) {
console.log(`Hello, ${name}!`);
}
module.exports = greet; // Export the 'greet' function
// In another file:
const greet = require('./myModule');
greet('World'); // Outputs: Hello, World!3. export default in ES Modules
export default allows you to export a single value as the default export of a module.
This value can be a function, class, object, or any other data type.
// myModule.js
export default function greet(name) {
console.log(`Hello, ${name}!`);
}
// In another file:
import greet from './myModule';
greet('World'); // Outputs: Hello, World!4. Key Differences
Default vs. Named Exports: export default is for a single default export. ES Modules also support named exports (export const myVar = ...) for exporting multiple values.
Import Syntax: Importing a default export uses a simpler syntax (import ... from ...) compared to importing named exports (import { ... } from ...).
Interoperability: Node.js has been gradually adding support for ES Modules. However, you might still encounter CommonJS modules, especially in older projects.
5. Can You Use Both?
While you can technically use both within a module, it's generally considered best practice to choose one style (CommonJS or ES Modules) and stick with it for consistency.
6. When to Use What
New Projects: Favor ES Modules for their standardization, flexibility, and wider adoption in modern JavaScript.
Existing Node.js Projects: If a project already uses CommonJS, continue using module.exports for consistency.
Libraries: Consider supporting both module systems to maximize compatibility with different environments.
In essence, understanding the historical context and the differences between module.exports and export default empowers you to write cleaner, more maintainable JavaScript code, especially when working with modules.
The code demonstrates different ways to export and import functions and variables in JavaScript using CommonJS and ES Modules. It shows how to export multiple functions as an object in CommonJS, export named functions and variables in ES Modules, and export a single default function in ES Modules. Each example includes both the exporting and importing modules, illustrating how to use the exported members in another file.
// ==================================
// CommonJS (module.exports) Examples
// ==================================
// mathUtils.js
function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b;
}
module.exports = { add, subtract };
// app.js
const mathUtils = require('./mathUtils');
console.log(mathUtils.add(5, 3)); // Output: 8
console.log(mathUtils.subtract(10, 4)); // Output: 6
// ==================================
// ES Modules (export/import) Examples
// ==================================
// stringUtils.js
export function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
export const message = "Hello from stringUtils!";
// app.js
import { capitalize, message } from './stringUtils';
console.log(capitalize('hello')); // Output: Hello
console.log(message); // Output: Hello from stringUtils!
// ==================================
// ES Modules (export default) Example
// ==================================
// greet.js
export default function(name) {
console.log(`Greetings, ${name}!`);
}
// app.js
import greetUser from './greet';
greetUser('Alice'); // Output: Greetings, Alice!Explanation:
module.exports to expose functions from mathUtils.js.app.js, require() fetches these functions as properties of the mathUtils object.export to individually export capitalize and message.app.js, we use import { ... } from ... to import specific named exports.export default to mark a single function as the default export in greet.js.app.js, we use import ... from ... to directly import the default export.Remember that to use ES Modules, you might need to configure your environment (e.g., use .mjs file extensions or set the "type": "module" in your package.json for Node.js projects).
Understanding the module object: The module object in CommonJS is a global object within each module. It provides information about the module and acts as a container for the module's exports.
exports is a shortcut (but be careful!): In CommonJS, you can use exports.myFunction = ... instead of module.exports.myFunction = .... However, avoid assigning a new value directly to exports (like exports = ...), as it breaks the link to the actual module.exports object.
Named exports offer organization: While export default is convenient for single exports, using named exports (export const myVar = ...) in ES Modules can make your code more readable and maintainable, especially when exporting multiple values from a module.
Tree-shaking benefits with ES Modules: ES Modules' static structure allows bundlers to perform "tree-shaking" – eliminating unused code during the bundling process. This results in smaller bundle sizes, which are crucial for web performance.
Dynamic imports for lazy loading: ES Modules support dynamic imports (import('./myModule').then(...)), which let you load modules on demand. This is useful for optimizing initial load times by only loading modules when they are actually needed.
The future is modular: The JavaScript ecosystem is moving towards wider adoption of ES Modules. Understanding both systems is valuable, but prioritize learning and using ES Modules for new projects to align with current best practices.
| Feature |
module.exports (CommonJS) |
export default (ES Modules) |
|---|---|---|
| Origin | Node.js | ES6 (ES2015) JavaScript standard |
| Purpose | Exports a single value as the module's output | Exports a single value as the default export |
| Syntax | module.exports = value; |
export default value; |
| Import Syntax | const variable = require('module'); |
import variable from 'module'; |
| Multiple Exports | Requires assigning properties to the module.exports object |
Uses named exports (export const myVar = ...) |
| Best Use | Existing Node.js projects for consistency | New projects for standardization and flexibility |
Key Takeaways:
module.exports) is older and specific to Node.js.export/import) are the standard and offer more features like named exports.Understanding these differences is crucial for writing clean and maintainable JavaScript code when working with modules.
Both module.exports and export default serve the crucial purpose of making code reusable in JavaScript. While module.exports is rooted in Node.js and CommonJS, export default, as part of the ES Modules system, has become the preferred choice for modern JavaScript development due to its alignment with the standardized approach and its enhanced features. Choosing the right method depends largely on the context of your project, whether you prioritize compatibility with older Node.js conventions or embrace the latest standards for maintainability and scalability. Understanding the nuances of both approaches empowers developers to write cleaner, more efficient, and interoperable JavaScript code, ultimately leading to more robust and maintainable applications.
Module Exports vs. Export Default: Why Not Both? | Big Nerd Ranch | CommonJS didn't have a default export. ES6 modules do. Why would you use a default export, and more importantly, what does it mean when you do?
The Difference between 'module.export' and 'export default' | by ... | In summary, module.exports is associated with CommonJS modules used in Node.js, while export default is associated with ES6 modules… Module Exports and Loading: ES5 to ES6 | by Zach Gavin | Medium | Recently at Think Company, my team has begun an Angular2 project! Woohoo!! It’s exciting to use cutting edge libraries — but with Angular2…
export - JavaScript | MDN | The export declaration is used to export values from a JavaScript module. Exported values can then be imported into other programs with the import declaration or dynamic import. The value of an imported binding is subject to change in the module that exports it — when a module updates the value of a binding that it exports, the update will be visible in its imported value.
FAQ: Intermediate JavaScript Modules - export default - JavaScript ... | This community-built FAQ covers the “export default” exercise from the lesson “Intermediate JavaScript Modules”. Paths and Courses This exercise can be found in the following Codecademy content: Web Development Introduction To JavaScript FAQs on the exercise export default How can I use export default to export a function? Join the Discussion. Help a fellow learner on their journey. Ask or answer a question about this exercise by clicking reply () below! Agree with a comment or...
Node.js module.exports vs. exports - Scaler Topics | This article on Scaler Topics covers what is the difference between Module.exports and exports in detail. Modules: Packages | Node.js v22.8.0 Documentation | ... or object export like module.exports = function () { ... } , or if support ... export the default optionally along with any named exports as well: