CommonJS require and ES Module import

Lesson content

🎯 Goal By the end of this lesson, you'll understand: What are Modules? What is CommonJS? What are ES Modules (ESM)? Difference between require() and import When to use each Interview questions What is a Module? A module is a JavaScript file that contains code you can reuse in other files. For example: project/ │ ├── math.js ├── app.js Instead of writing the same code in every file, you write it once and import it wherever needed. Real-Life Example 📚 Imagine a library. 📖 Math Book 📖 English Book 📖 Science Book You don't rewrite the books. You simply borrow the one you need. Modules work the same way. What is CommonJS? CommonJS is the module system used by Node.js (before ES Modules). It uses: require() → Import module.exports → Export Export (math.js) function add ( a , b ) { return a + b ; } module . exports = add ; Import (app.js) const add = require ( "./math" ); console . log( add ( 10 , 20 )); Output 30 What is ES Module (ESM)? ES Modules were introduced in ES6 (2015) . They use: import export Today, they are the recommended module system for modern JavaScript. Export (math.js) export function add ( a , b ) { return a + b ; } Import (app.js) import { add } from "./math.js" ; console . log( add ( 10 , 20 )); Output 30 Default Export Sometimes a file exports only one thing. Export export default function greet () { console . log( "Hello" ); } Import import greet from "./greet.js" ; greet (); Output Hello Named Export A file can export multiple values. Export export const name = "Ajay" ; export const age = 30 ; Import import { name , age } from "./user.js" ; console . log( name ); console . log( age ); Output Ajay 30 Import Everything import * as user from "./user.js" ; console . log( user . name); console . log( user . age); CommonJS vs ES Modules CommonJS const math = require ( "./math" ); ES Module import math from "./math.js" ; Export Comparison CommonJS module . exports = add ; ES Module export default add ; Real-Life Example 🛒 Imagine an e-commerce project. project/ products.js users.js orders.js app.js Each file has one responsibility. app.js import { getProducts } from "./products.js" ; import { getUsers } from "./users.js" ; import { getOrders } from "./orders.js" ; Everything stays organized. Comparison Table Feature CommonJS ES Modules Import require() import Export module.exports export Standard Node.js (older) ECMAScript (modern) Browser Support ❌ No ✅ Yes Static Analysis ❌ No ✅ Yes Tree Shaking ❌ No ✅ Yes When Should You Use Which? Use CommonJS Legacy Node.js projects Older codebases Example const express = require ( "express" ); Use ES Modules Modern JavaScript React Angular Vue Modern Node.js projects Example import express from "express" ; How to Enable ES Modules in Node.js Option 1 (Recommended) In package.json { "type": "module" } Now you can use: import express from "express" ; Option 2 Use the .mjs extension. app.mjs Interview Question What is the output? math.js export function add ( a , b ) { return a + b ; } app.js import { add } from "./math.js" ; console . log( add ( 5 , 10 )); Output 15 Common Mistake ❌ import add from "./math" ; If add is a named export , this is incorrect. ✅ Correct import { add } from "./math.js" ; Key Points ✅ A module is a reusable JavaScript file. ✅ CommonJS uses require() and module.exports . ✅ ES Modules use import and export . ✅ Use named exports for multiple values. ✅ Use default export when exporting one main value. ✅ Modern projects should prefer ES Modules . 🧠 Easy Formula CommonJS Export → module.exports Import → require() ES Modules Export → export / export default Import → import Remember: 📦 CommonJS = Older Node.js module system ( require ) 🚀 ES Modules = Modern JavaScript module system ( import ) and the preferred choice for new applications.