The behavior of exports in Node.js and React/JavaScript ES6 is determined by how you structure and use module.exports (CommonJS) or export/export default (ES6). Let me clarify the differences and when to use each approach.

1. CommonJS Exports (Node.js)

In Node.js, the CommonJS module system uses module.exports and require().

Example of module.exports

// file: math.js
function add(a, b) {
  return a + b;
}

module.exports = add;

How to Import:

// file: app.js
const addFunction = require('./math'); // Any name can be used
console.log(addFunction(2, 3)); // Output: 5
  • Explanation:
  • With module.exports, you can export a single value (function, object, array, etc.).
  • When importing, you can name it whatever you like.

2. Named Exports in CommonJS

You can also export multiple values as named exports using an object in module.exports:

// file: math.js
function add(a, b) {
  return a + b;
}

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

module.exports = { add, subtract };

How to Import:

// file: app.js
const { add, subtract } = require('./math'); // Must use the same names
console.log(add(2, 3)); // Output: 5
console.log(subtract(5, 3)); // Output: 2
  • Explanation:
  • You must use the exact names of the exported properties (add, subtract).

3. ES6 Exports (React/Modern JavaScript)

In React or modern JavaScript, you use ES6 module syntax: export and export default.

Default Export

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

How to Import:

// file: app.js
import addFunction from './math'; // Any name can be used
console.log(addFunction(2, 3)); // Output: 5
  • Explanation:
  • A file can have only one default export.
  • When importing, you can name it whatever you like.

Named Export

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

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

How to Import:

// file: app.js
import { add, subtract } from './math'; // Must use the same names
console.log(add(2, 3)); // Output: 5
console.log(subtract(5, 3)); // Output: 2
  • Explanation:
  • You can export multiple functions/variables as named exports.
  • When importing, you must use the same names.

Combining Named and Default Exports

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

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

How to Import:

// file: app.js
import addFunction, { subtract } from './math';
console.log(addFunction(2, 3)); // Output: 5
console.log(subtract(5, 3));    // Output: 2
  • Explanation:
  • You can combine a default export with named exports.
  • Default export can be imported with any name; named exports require the exact name.

Key Differences Between CommonJS and ES6 Modules

Feature CommonJS (Node.js) ES6 Modules (React/Modern JS) Syntax module.exports and require export and import Exporting Default module.exports = value export default value Exporting Multiple Values Use an object in module.exports export { value1, value2 } Importing Default Any name can be used Any name can be used Importing Named Use the exact property name Must use the exact name File Extension Required Optional (.js assumed) Mandatory for certain tools When to Use Which

  1. CommonJS (module.exports and require):
  • Use in Node.js environments.
  • Best for older projects or when working with tools that rely on CommonJS.
  1. ES6 Modules (export and import):
  • Use in React, modern JavaScript, and browser-based applications.
  • Preferred for new projects.

Best Practices

  • For Node.js projects:
  • Stick to module.exports unless you're using a modern setup with support for ES6 modules (type: "module" in package.json).
  • For React or modern JavaScript:
  • Use export default for a primary export (like a main function or component).
  • Use named exports for utility functions or constants.

By following these guidelines, you’ll have a better understanding of when and how to use each export/import pattern!