ES6 Modules vs CommonJS

📦 What Are They?

✅ Syntax Comparison : Example 1

🔹 CommonJS (Used in Node.js)

// utils.js
function add(a, b) {
  return a + b;
}

module.exports = add;

// app.js
const add = require('./utils');
console.log(add(2, 3)); // 5

✴️ ES6 Modules (Modern JS – Browser & Node.js)

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

// app.js
import { add } from './utils.js';
console.log(add(2, 3)); // 5

✅ Syntax Comparison : Example 2

✨ CommonJS:

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

module.exports = { add, sub };

// app.js
const math = require('./math');
console.log(math.add(1, 2)); // 3

✴️ ES6 Modules (Modern JS – Browser & Node.js)

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

// app.js
import { add, sub } from './math.js';
console.log(add(1, 2)); // 3

🔁 Key Differences

🧠 Pros and Cons

✅ CommonJS

✔ Simple to use in Node.js

✔ Mature and widely supported

❌ Not suitable for browser environments

❌ No native support for asynchronous module loading

✅ ES6 Modules

✔ Standardized in ECMAScript

✔ Works in both browser & server

✔ Supports tree-shaking (smaller bundle size)

✔ Asynchronous by nature

❌ Requires build tools or flags in older environments

💡 Use Case Recommendations