DEV Community: daichitt

CommonJS and ES Modules

daichitt — Mon, 16 Jun 2025 08:42:33 +0000

In Node.js, there are two distinct module management systems: CommonJS and ES Modules (ECMAScript Modules). The difference between the two code snippets you provided lies in these module systems.

1. CommonJS (`const express = require('express')`)

CommonJS is the default module management system in Node.js.
It uses require() to import modules.
When a file has a .js extension, Node.js treats it as a CommonJS module by default.

const express = require('express');

This format has been the standard way of writing modules in the Node.js environment for a long time.

2. ES Modules (`import express from 'express'`)

ES Modules (ECMAScript Modules) is a module system based on the latest JavaScript specification.
It uses import to import modules.
To use ES Modules, you typically use the .mjs file extension, or you need to set "type": "module" in your package.json file.

import express from 'express';

ES Modules are the latest JavaScript standard and are supported in browsers and newer Node.js versions.

Key Differences

require() is used in CommonJS, while import is used in ES Modules.
Using ES Modules requires configuration (e.g., file extension or package.json settings).
CommonJS is an older, widely used module system that is still common in most Node.js projects, but ES Modules are gradually gaining popularity as the new standard.

Which system you should use depends on your project's requirements and compatibility needs.

Sample package.json

{
    "name": "sample PJ",
    "private": true,
    "version": "0.0.0",
    "type": "module", // ES Modules
    "scripts": {
        "dev": "vite",
        "build": "tsc; vite build",
        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
        "preview": "vite preview",
        "deploy": "npm run build && firebase deploy --only hosting"
    },
    "dependencies": {   
        "react": "^19.0.0",
    },
    "devDependencies": {
        "@types/react": "^19.0.4",
    }
}

Promise JavaScript

daichitt — Mon, 16 Jun 2025 08:36:48 +0000

Terminology

CallStack
Task queue
Promise

Execution Order

I had a misunderstanding about the execution order, so I'm summarizing it:

orderExecutor is called and enters the Call Stack.
orderExecutor exits the Call Stack.
then enters the Task Queue.
console.log('2') is called and enters the Call Stack.
console.log('2') exits the Call Stack.
Since the Call Stack is empty, then moves from the Task Queue into the Call Stack.
then is executed.


function orderExecutor(resolve, reject) {
    console.log('1'); // 1
    resolve('3');
}
let orderPizza = new Promise(orderExecutor);
orderPizza.then(function (value) {
    console.log(value); // 3
});
console.log('2'); // 2

// 1, 2, 3

Reference

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth

https://www.youtube.com/watch?v=eiC58R16hb8&t=518s

Abstract Syntax Tree with Javascript

daichitt — Mon, 16 Jun 2025 08:25:43 +0000

Javascript sample code

const war = 5; // VariableDeclarator

 function triple(number){  // FunctionDeclaration
   return 3 * war; 
 }

Json out put

{
  "type": "Program",
  "start": 0,
  "end": 59,
  "body": [
    {
      "type": "VariableDeclaration",
      "start": 0,
      "end": 14,
      "declarations": [
        {
          "type": "VariableDeclarator",
          "start": 6,
          "end": 13,
          "id": {
            "type": "Identifier",
            "start": 6,
            "end": 9,
            "name": "war"
          },
          "init": {
            "type": "Literal",
            "start": 12,
            "end": 13,
            "value": 5,
            "raw": "5"
          }
        }
      ],
      "kind": "const"
    },
    {
      "type": "FunctionDeclaration",
      "start": 16,
      "end": 59,
      "id": {
        "type": "Identifier",
        "start": 25,
        "end": 31,
        "name": "triple"
      },
      "expression": false,
      "generator": false,
      "async": false,
      "params": [
        {
          "type": "Identifier",
          "start": 32,
          "end": 38,
          "name": "number"
        }
      ],
      "body": {
        "type": "BlockStatement",
        "start": 39,
        "end": 59,
        "body": [
          {
            "type": "ReturnStatement",
            "start": 42,
            "end": 57,
            "argument": {
              "type": "BinaryExpression",
              "start": 49,
              "end": 56,
              "left": {
                "type": "Literal",
                "start": 49,
                "end": 50,
                "value": 3,
                "raw": "3"
              },
              "operator": "*",
              "right": {
                "type": "Identifier",
                "start": 53,
                "end": 56,
                "name": "war"
              }
            }
          }
        ]
      }
    }
  ],
  "sourceType": "module"
}

Reference

Javascript sample code

https://astexplorer.net/

https://www.youtube.com/watch?v=N5hczoxUzMU&list=LL&index=4&t=32s

https://www.npmjs.com/package/abstract-syntax-tree

DEV Community: daichitt

CommonJS and ES Modules

1. CommonJS (const express = require('express'))

2. ES Modules (import express from 'express')

Key Differences

Sample package.json

Promise JavaScript

Terminology

Execution Order

Reference

Abstract Syntax Tree with Javascript

Javascript sample code

Json out put

Reference

Javascript sample code

1. CommonJS (`const express = require('express')`)

2. ES Modules (`import express from 'express'`)