Fix the table squishing issue
10 lines
<!-- language-all: javascript -->
<!-- language-all: javascript -->
| | `import` (ES Modules syntax) | `require` (CommonJS Modules syntax) |
| | `import` (ES Modules syntax) | `require` (CommonJS Modules syntax) |
|:---:|:---|:---|
|:---:|:---|:---|
| **Summary** | <p>It is the latest standard for working with modules in JavaScript and is supported in modern browsers and environments that transpile or support ES6, like TypeScript or Babel.</p> | <p>It was not originally part of JavaScript, but was adopted as the standard for Node.js, which has been routinely used in JavaScript server-side development.<br><br>While Node.js historically used CommonJS, it now also supports ES6 modules.</p> |
| **Summary** | <p>It is the latest standard for working with modules in JavaScript and is supported in modern browsers and environments that transpile or support ES6, like TypeScript or Babel.</p> | <p>It was not originally part of JavaScript, but was adopted as the standard for Node.js, which has been routinely used in JavaScript server-side development.<br><br>While Node.js historically used CommonJS, it now also supports ES6 modules.</p> |
| **Exports** | <div><p>Static (pre-defined). The structure of the module's exports is determined when the code is parsed, not while running.</p><p>This static nature allows tooling such as bundlers and linters to analyze the code without executing it, enabling features like better tree-shaking and faster load times in browsers.</p> For example: <pre><code>// myModule.js export function myFunc() { /\*...\*/ } export const MY_CONST = 123;</code></pre></div> | <div><p>Computed during runtime. The exports in a module are determined during the execution of the code.</p>For example: <pre><code>// myModule.js if (process.env.NODE_ENV === 'development') { module.exports.debug = function debug() { console.log('Debugging...'); } } else { module.exports.log = function log() { console.log('Logging...'); } }</code></pre></div> |
| **Exports** | <p>Static (pre-defined). The structure of the module's exports is determined when the code is parsed, not while running.</p><p>This static nature allows tooling such as bundlers and linters to analyze the code without executing it, enabling features like better tree-shaking and faster load times in browsers.</p> For example: <pre><code>// myModule.js export function myFunc() { /\*...\*/ } export const MY_CONST = 123;</code></pre> | <p>Computed during runtime. The exports in a module are determined during the execution of the code.</p>For example: <pre><code>// myModule.js if (process.env.NODE_ENV === 'development') { module.exports.debug = function debug() { console.log('Debugging...'); } } else { module.exports.log = function log() { console.log('Logging...'); } }</code></pre> |
| **Loading Modules** | <div><p>Can be asynchronous, allowing efficient, selective loading of module parts. This can result in faster load times and better performance.</p>For example: <pre><code>import { myFunc } from './myModule.js'; myFunc();</code></pre></div> | <div><p>Synchronous (loads modules one by one). Always loads entire module, which could affect performance if the module is large.</p>For example: <pre><code>const { debug, log } = require('./myModule.js'); if(debug) debug(); if(log) log();</code></pre></div> |
| **Loading Modules** | <p>Can be asynchronous, allowing efficient, selective loading of module parts. This can result in faster load times and better performance.</p>For example: <pre><code>import { myFunc } from './myModule.js'; myFunc();</code></pre> | <p>Synchronous (loads modules one by one). Always loads entire module, which could affect performance if the module is large.</p>For example: <pre><code>const { debug, log } = require('./myModule.js'); if(debug) debug(); if(log) log();</code></pre> |
| **Full Example** | <div>Make sure to export the function first. <pre><code>// somefile.js export function sayHello() { console.log("Hello, world!"); } console.log("somefile has been loaded!");</code></pre> Then import it <pre><code>// main.js import { sayHello } from './somefile.js'; sayHello(); // 👇 Outputs 👇 // "somefile has been loaded!" // "Hello, world!"</code></pre></div> | <div>Make sure to add the function to `module.exports`. <pre><code>// somefile.js function sayHello() { console.log("Hello, world!"); } module.exports = { sayHello }; console.log("somefile has been loaded!");</code></pre> Then import it <pre><code>// main.js const { sayHello } = require('./somefile.js'); sayHello(); // 👇 Outputs 👇 // "somefile has been loaded!" // "Hello, world!"</code></pre></div> |
| **Full Example** | Make sure to export the function first. <pre><code>// somefile.js export function sayHello() { console.log("Hello, world!"); } console.log("somefile has been loaded!");</code></pre> Then import it <pre><code>// main.js import { sayHello } from './somefile.js'; sayHello(); // 👇 Outputs 👇 // "somefile has been loaded!" // "Hello, world!"</code></pre> | Make sure to add the function to `module.exports`. <pre><code>// somefile.js function sayHello() { console.log("Hello, world!"); } module.exports = { sayHello }; console.log("somefile has been loaded!");</code></pre> Then import it <pre><code>// main.js const { sayHello } = require('./somefile.js'); sayHello(); // 👇 Outputs 👇 // "somefile has been loaded!" // "Hello, world!"</code></pre> |
| **Scope** | <div><p>If an exported value changes in the module it was defined in, that change is visible in all modules that import this value.<p>For example: <pre><code>// somefile.js let count = 1; export { count }; setTimeout(() => count = 2, 1000);</code></pre> Now use it somewhere <pre><code>// main.js import { count } from './somefile.js'; console.log(count); // 1 setTimeout(() => console.log(count), 1000); // 2</code></pre></div> | <div><p>The exports are _copied_ at the time of requiring the module.<br>So even if an exported value changes in the module it was defined in, that change is **not** visible in the module where it's required.</p> For example: <pre><code>// somefile.js let count = 1; module.exports.count = count; setTimeout(() => count = 2, 1000);</code></pre> Now use it somewhere <pre><code>// main.js const mod = require('./somefile.js'); console.log(mod.count); // 1 setTimeout(() => console.log(mod.count), 1000); // 1</code></pre></div> |
| **Scope** | <p>If an exported value changes in the module it was defined in, that change is visible in all modules that import this value.<p>For example: <pre><code>// somefile.js let count = 1; export { count }; setTimeout(() => count = 2, 1000);</code></pre> Now use it somewhere <pre><code>// main.js import { count } from './somefile.js'; console.log(count); // 1 setTimeout(() => console.log(count), 1000); // 2</code></pre> | <p>The exports are _copied_ at the time of requiring the module.<br>So even if an exported value changes in the module it was defined in, that change is **not** visible in the module where it's required.</p> For example: <pre><code>// somefile.js let count = 1; module.exports.count = count; setTimeout(() => count = 2, 1000);</code></pre> Now use it somewhere <pre><code>// main.js const mod = require('./somefile.js'); console.log(mod.count); // 1 setTimeout(() => console.log(mod.count), 1000); // 1</code></pre> |
If it's hard to read here, [read a copy of this table](https://github.com/akhanalcs/tour-of-heroes/blob/main/docs/learn-javascript.md#import-vs-require) in GitHub.
If it's hard to read here, [read a copy of this table](https://github.com/akhanalcs/tour-of-heroes/blob/main/docs/learn-javascript.md#import-vs-require) in GitHub.