Skip to content

Commit 1c9e044

Browse files
qns: address user feedback (#31)
Co-authored-by: GitHub Actions <github-actions[bot]@users.noreply.github.com>
1 parent 8c7804a commit 1c9e044

File tree

3 files changed

+62
-50
lines changed

3 files changed

+62
-50
lines changed

README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ This list contains a longer list of important JavaScript questions. Not all of t
218218
| 127 | [What are the benefits of using a module bundler?](#what-are-the-benefits-of-using-a-module-bundler) | Intermediate |
219219
| 128 | [Explain the concept of tree shaking in module bundling](#explain-the-concept-of-tree-shaking-in-module-bundling) | Intermediate |
220220
| 129 | [What are the metadata fields of a module?](#what-are-the-metadata-fields-of-a-module) | Intermediate |
221-
| 130 | [What do you think of AMD vs CommonJS?](#what-do-you-think-of-amd-vs-commonjs) | Basic |
221+
| 130 | [What do you think of CommonJS vs ESM?](#what-do-you-think-of-commonjs-vs-esm) | Basic |
222222
| 131 | [What are the different types of errors in JavaScript?](#what-are-the-different-types-of-errors-in-javascript) | Intermediate |
223223
| 132 | [How do you handle errors using `try...catch` blocks?](#how-do-you-handle-errors-using-trycatch-blocks) | Basic |
224224
| 133 | [What is the purpose of the `finally` block?](#what-is-the-purpose-of-the-finally-block) | Basic |
@@ -5776,11 +5776,11 @@ Metadata fields of a module typically include information such as the module's n
57765776

57775777
<br>
57785778

5779-
### What do you think of AMD vs CommonJS?
5779+
### What do you think of CommonJS vs ESM?
57805780

57815781
<!-- Update here: /questions/what-do-you-think-of-amd-vs-commonjs/en-US.mdx -->
57825782

5783-
AMD (Asynchronous Module Definition) and CommonJS are two JavaScript module systems. AMD is designed for asynchronous loading of modules, making it suitable for browsers. CommonJS is designed for synchronous loading, making it more suitable for server-side environments like Node.js. AMD uses `define` and `require` for defining and loading modules, while CommonJS uses `module.exports` and `require`.
5783+
JavaScript has evolved its module systems. ESM (ECMAScript Modules) using `import` / `export` is the official standard, natively supported in modern browsers and Node.js, designed for both synchronous and asynchronous use cases. CommonJS (CJS) using `require` / `module.exports` was the original standard for Node.js, primarily synchronous, and remains prevalent in the Node ecosystem. AMD (Asynchronous Module Definition) using `define` / `require` was an early system designed for asynchronous loading in browsers but is now largely obsolete, replaced by ESM.
57845784

57855785
<!-- Update here: /questions/what-do-you-think-of-amd-vs-commonjs/en-US.mdx -->
57865786

@@ -7290,7 +7290,7 @@ JavaScript interview questions categorized by difficulty.
72907290
87. [What are the different methods for iterating over an array?](#what-are-the-different-methods-for-iterating-over-an-array)
72917291
88. [What are the different ways to copy an object or an array?](#what-are-the-different-ways-to-copy-an-object-or-an-array)
72927292
89. [What are the different ways to make an API call in JavaScript?](#what-are-the-different-ways-to-make-an-api-call-in-javascript)
7293-
90. [What do you think of AMD vs CommonJS?](#what-do-you-think-of-amd-vs-commonjs)
7293+
90. [What do you think of CommonJS vs ESM?](#what-do-you-think-of-commonjs-vs-esm)
72947294
91. [What is recursion and how is it used in JavaScript?](#what-is-recursion-and-how-is-it-used-in-javascript)
72957295
92. [What is the difference between a parameter and an argument?](#what-is-the-difference-between-a-parameter-and-an-argument)
72967296
93. [What is the DOM and how is it structured?](#what-is-the-dom-and-how-is-it-structured)

questions/explain-how-prototypal-inheritance-works/en-US.mdx

+3-3
Original file line numberDiff line numberDiff line change
@@ -121,8 +121,8 @@ function Dog(name, breed) {
121121
this.breed = breed;
122122
}
123123

124-
// Set the prototype of Dog to be a new instance of Animal
125-
Dog.prototype = Object.create(Animal.prototype);
124+
// Set the prototype of Dog to inherit from Animal's prototype
125+
Object.setPrototypeOf(Dog.prototype, Animal.prototype);
126126

127127
// Add a method to the Dog prototype
128128
Dog.prototype.bark = function () {
@@ -140,7 +140,7 @@ fido.sayName(); // "My name is Fido"
140140
console.log(fido.fly); // undefined
141141
```
142142

143-
4. **`Object.create()`**: This method creates a new object with the specified prototype object and properties. It's a straightforward way to set up prototypical inheritance. If you create a object via `Object.create(null)` it will not inherit any properties from `Object.prototype`. This means the object will not have any built-in properties or methods like `toString()`, `hasOwnProperty()`,
143+
4. **`Object.create()`**: This method creates a new object whose internal `[[Prototype]]` is directly linked to the specified prototype object. It's the most direct way to create an object that inherits from another specific object, without involving constructor functions. If you create a object via `Object.create(null)` it will not inherit any properties from `Object.prototype`. This means the object will not have any built-in properties or methods like `toString()`, `hasOwnProperty()`,
144144

145145
```js live
146146
// Define a prototype object
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,16 @@
11
---
2-
title: What do you think of AMD vs CommonJS?
2+
title: What do you think of CommonJS vs ESM?
33
---
44

55
## TL;DR
66

7-
AMD (Asynchronous Module Definition) and CommonJS are two JavaScript module systems. AMD is designed for asynchronous loading of modules, making it suitable for browsers. CommonJS is designed for synchronous loading, making it more suitable for server-side environments like Node.js. AMD uses `define` and `require` for defining and loading modules, while CommonJS uses `module.exports` and `require`.
7+
JavaScript has evolved its module systems. ESM (ECMAScript Modules) using `import` / `export` is the official standard, natively supported in modern browsers and Node.js, designed for both synchronous and asynchronous use cases. CommonJS (CJS) using `require` / `module.exports` was the original standard for Node.js, primarily synchronous, and remains prevalent in the Node ecosystem. AMD (Asynchronous Module Definition) using `define` / `require` was an early system designed for asynchronous loading in browsers but is now largely obsolete, replaced by ESM.
88

99
---
1010

11-
## AMD vs CommonJS
12-
1311
### Overview
1412

15-
Both AMD and CommonJS are module systems used in JavaScript to manage dependencies and organize code. They serve different purposes and are suited to different environments.
16-
17-
### AMD (Asynchronous Module Definition)
18-
19-
#### Characteristics
20-
21-
- Designed for asynchronous loading of modules
22-
- Primarily used in browser environments
23-
- Uses `define` and `require` for defining and loading modules
24-
25-
#### Example
26-
27-
```javascript
28-
// Defining a module in AMD
29-
define(['dependency1', 'dependency2'], function (dep1, dep2) {
30-
return {
31-
// Module code here
32-
};
33-
});
34-
35-
// Loading a module in AMD
36-
require(['module1', 'module2'], function (mod1, mod2) {
37-
// Code that uses mod1 and mod2
38-
});
39-
```
13+
Module systems help manage this complexity by allowing code to be split into reusable pieces (modules) with clear dependencies. Over time, different module systems emerged before an official standard was adopted.
4014

4115
### CommonJS
4216

@@ -64,37 +38,75 @@ const mod2 = require('module2');
6438
// Code that uses mod1 and mod2
6539
```
6640

41+
### ESM (ECMAScript Modules)
42+
43+
#### Characteristics
44+
45+
- Official JavaScript standard module system
46+
- Supported natively in modern browsers and Node.js
47+
- Designed for both asynchronous and synchronous scenarios
48+
- Uses `export` and `import` for defining and loading modules
49+
50+
#### Example
51+
52+
```javascript
53+
import dep1 from 'dependency1'; // if dependency1 had a default export
54+
import { dep2 } from 'dependency2'; // named import to import something specific from dependency2
55+
56+
// Module code using dep1, dep2...
57+
58+
export function someFunction() {
59+
// ... function logic ...
60+
}
61+
export const someValue = 'hello';
62+
63+
// Or export multiple things at once
64+
// export { someFunction, someValue };
65+
66+
// Or export a default value
67+
// export default class MyClass {
68+
// ...
69+
// }
70+
```
71+
6772
### Key differences
6873

6974
#### Loading mechanism
7075

71-
- **AMD**: Asynchronous, suitable for browsers where non-blocking operations are crucial.
72-
- **CommonJS**: Synchronous, suitable for server-side environments where modules are loaded before execution.
76+
- **CommonJS**: Synchronous (blocks until loaded).
77+
- **ESM**: Asynchronous-friendly (non-blocking in browsers).
7378

7479
#### Environment suitability
7580

76-
- **AMD**: Better for client-side applications.
77-
- **CommonJS**: Better for server-side applications.
81+
- **CommonJS**: Node.js legacy standard.
82+
- **ESM**: Official standard (Browser & Node.js).
7883

7984
#### Syntax
8085

81-
- **AMD**: Uses `define` and `require`.
82-
- **CommonJS**: Uses `module.exports` and `require`.
86+
- **CommonJS**: `require()` / `module.exports`.
87+
- **ESM**: `import` / `export`.
8388

84-
### Use cases
89+
#### Analysis
8590

86-
#### AMD
91+
- **CommonJS**: Dynamic (runtime analysis).
92+
- **ESM**: Static (compile-time analysis, enables tree-shaking).
8793

88-
- Suitable for web applications where you need to load modules asynchronously to avoid blocking the UI.
89-
- Often used with module loaders like RequireJS.
94+
### Use cases
9095

9196
#### CommonJS
9297

93-
- Suitable for server-side applications where modules are loaded once at the start.
94-
- The standard module system for Node.js.
98+
- Older Node.js projects or where sync loading is needed.
99+
- Default in Node.js unless configured for ESM.
100+
101+
#### ESM
102+
103+
- Modern web development (native browser support).
104+
- New Node.js projects, especially those needing async features or optimizations.
105+
- Code intended for both browser and server.
95106

96107
## Further reading
97108

98-
- [RequireJS documentation](https://requirejs.org/docs/api.html)
99-
- [Node.js modules documentation](https://nodejs.org/api/modules.html)
100109
- [MDN Web Docs on JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
110+
- [Node.js: CommonJS modules](https://nodejs.org/api/modules.html)
111+
- [Node.js: ESM](https://nodejs.org/api/esm.html)
112+
- [RequireJS (AMD Loader - Historical)](https://requirejs.org/docs/api.html)

0 commit comments

Comments
 (0)