The Showdown: .js vs. .mjs in Node.js - A Guide for JavaScript Developers

• .js: This is the traditional extension for JavaScript files. It can hold code written in either CommonJS modules (the older module system for Node.js) or ECMAScript modules (the newer standard).
• .mjs: This extension specifically indicates a file written in the ECMAScript module format.

Module Systems:

• CommonJS Modules (CJS): These use the require keyword to import functionalities from other files and module.exports (or exports) to expose functionalities from the current file.
• ECMAScript Modules (ESM): These use the import and export keywords for dependency management. They offer stricter scoping and better handling of circular dependencies compared to CJS.

Node.js and File Extensions:

• By default, Node.js treats .js files as CJS modules.
• To use .js files with ESM, you need to configure your project using a package.json file (indicating the module type as "module").
• The .mjs extension explicitly tells Node.js to treat the file as an ECMAScript module.

Choosing Between Extensions:

• If your project uses mostly modern JavaScript features and benefits from the advantages of ESM, using the .mjs extension for better clarity is recommended.
• If your project has existing code in CJS format or you need compatibility with older Node.js versions, sticking with .js with proper configuration in package.json might be preferable.

Key Points:

• .js can be for either CJS or ESM depending on project configuration.
• .mjs explicitly indicates an ECMAScript module file.
• ESM offers advantages like stricter scoping and better dependency handling.
• Choose the extension that aligns with your project's needs and target Node.js version.

// main.js (CJS)
function greet(name) {
  return `Hello, ${name}!`;
}

// Export the function using module.exports
module.exports = greet;

Importing the CJS Module (app.js):

// app.js (CJS)
const greet = require('./main.js'); // Require the exported function

console.log(greet('World')); // Output: Hello, World!

ECMAScript Module (greeter.mjs):

// greeter.mjs (ESM)
export function greet(name) {
  return `Hello, ${name}!`;
}

// index.js (ESM)
import { greet } from './greeter.mjs'; // Import using the `import` keyword

console.log(greet('Everyone')); // Output: Hello, Everyone!

Note:

• In the CJS example, we use module.exports to expose the greet function, and require to import it in another file.
• In the ESM example, we use export to make the greet function accessible outside the module, and import to bring it into another file.

This approach involves manipulating the Document Object Model (DOM) to inject script tags dynamically at runtime. It's primarily used in web browsers, not ideal for Node.js environments. Libraries like jQuery provide functionalities like $.getScript for this purpose, but it's discouraged due to potential security risks and asynchronous execution issues.

Fetch API and eval (Highly Discouraged):

• You can use the fetch API to retrieve the content of a JavaScript file as a string.
• Then, the highly discouraged eval function can be used to execute the retrieved code within your current script.

Here's why this method is discouraged:

• Security Risks: eval allows execution of arbitrary code, making your application vulnerable to injection attacks.
• Scoping Issues: Variables and functions defined within the fetched code might conflict with your existing code's scope.
• Performance: eval involves additional overhead for parsing and executing the code, impacting performance.