From 53fd9ff4bf08aa3132b28c1f8b2cc2ee3fc396a2 Mon Sep 17 00:00:00 2001
From: h2210316651 <46309500+h2210316651@users.noreply.github.com>
Date: Wed, 20 Sep 2023 10:09:22 +0530
Subject: Updated modules.md to address issue #5420 (#5456)

* Update modules.md

Updated docs to address `The ES modules aren't always asynchronous. #5420` Issue.
- Included an elaborate explanation citing the difference between CommonJS and ES Modules,
- Added a summary

* Tweaks

---------

Co-authored-by: Colin McDonnell <colinmcd94@gmail.com>
---
 docs/runtime/modules.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/docs/runtime/modules.md b/docs/runtime/modules.md
index 5562b5d15..cfda31e3b 100644
--- a/docs/runtime/modules.md
+++ b/docs/runtime/modules.md
@@ -128,6 +128,17 @@ The biggest difference between CommonJS and ES Modules is that CommonJS modules
 - Browsers do not have native support for CommonJS modules, but they do have native support for ES Modules via `<script type="module">`.
 - CommonJS modules are not statically analyzable, while ES Modules only allow static imports and exports.
 
+**CommonJS Modules:** These are a type of module system used in JavaScript. One key feature of CommonJS modules is that they load and execute synchronously. This means that when you import a CommonJS module, the code in that module runs immediately, and your program waits for it to finish before moving on to the next task. It's similar to reading a book from start to finish without skipping pages.
+
+**ES Modules (ESM):** These are another type of module system introduced in JavaScript. They have a slightly different behavior compared to CommonJS. In ESM, static imports (imports made using `import` statements) are synchronous, just like CommonJS. This means that when you import an ESM using a regular `import` statement, the code in that module runs immediately, and your program proceeds in a step-by-step manner. Think of it like reading a book page by page.
+
+**Dynamic imports:** Now, here comes the part that might be confusing. ES Modules also support importing modules on the fly via the `import()` function. This is called a "dynamic import" and it's asynchronous, so it doesn't block the main program execution. Instead, it fetches and loads the module in the background while your program continues to run. Once the module is ready, you can use it. This is like getting additional information from a book while you're still reading it, without having to pause your reading.
+
+**In summary:**
+
+- CommonJS modules and static ES Modules (`import` statements) work in a similar synchronous way, like reading a book from start to finish.
+- ES Modules also offer the option to import modules asynchronously using the `import()` function. This is like looking up additional information in the middle of reading the book without stopping.
+
 {% /details %}
 
 ### Using `import`
-- 
cgit v1.2.3