How to share code between files in JavaScript ?

JavaScript is a powerful and popular programming language that is widely used for web development. One of the key features of JavaScript is its ability to share code between files. This can be useful for organizing large projects, reusing code, and maintaining code quality. In this article, we’ll see the different ways to share code between files in JavaScript explored.

Approaches: Below are the two different approaches for ES5 and ES6:

ES5 Approach:

• Using ‘global’ variables/functions: This approach involves creating variables or functions in the global scope, which makes them accessible from anywhere in your codebase. The downside of this approach is that it can lead to naming conflicts and make it harder to keep your code organized and maintainable.
• Using ‘module.exports’ and ‘require’ keywords: This approach is based on the CommonJS module system, which was used in Node.js. Using module.exports you can export any variable, function, or object from a file. In order to consume this exported value in another file, you use the required function to import the exported value. This approach allows you to organize your code in modules, and it is widely used for JavaScript on the server side, but in the browser environment, you will need a module bundler like webpack or Browserify.
• Using module patterns: There are several different module patterns that can be used to share code between files in JavaScript. One popular pattern is the module revealing pattern, which is used to create a single global variable that provides access to a group of functions and variables. By using this pattern, you can organize your code and keep the global scope clean.

ES6 Approach:

• Using the ‘export’ and ‘import’ keywords: This approach is based on the ECMAScript module system, a standard for JavaScript modules. The export keyword is used to export any variable, function, or object from a file, and the import keyword is used to import those exported values into another file. This approach is widely used for JavaScript on the client side, but it’s also supported on the server side with tools like Node.js.
• Using named exports and default exports: This approach allows you to export multiple values from a single file and name them individually. This way, you can import only the values that you need. It also allows you to set a default export, which can be imported without a name.
• Combining exports from multiple files using the export * from statement: This feature allows you to import all exports from a file into a single object, which can be useful when you want to import a lot of exports from a single file.
• Using dynamic imports with the import() function: This feature allows you to load modules dynamically at runtime, which can be useful for scenarios where you don’t need all the code to be loaded at once.
• Destructuring assignment for imports: This feature allows you to import specific variables, functions, or objects by destructuring the import statement.

As you can see, both ES5 and ES6 approaches have their own benefits and drawbacks, and it’s important to understand the different options before deciding which approach to use in your application.

Example 1: Using ‘global’ variables/functions: A variable or function defined in the global scope (i.e., outside of any function or block), can be accessed from any file. However, it is considered a bad practice to use global data members as it might lead to naming conflicts and make code hard to read.

• helper.js: A file helper.js can be created as such:

Javascript

// Defining a global function
function sum(a, b) {
    return a + b;
}

// Defining another global function
function multiply(a, b) {
    return a * b;
}

• main.js: Then, these functions may be called in another file, main.js as follows:

Javascript

// Function calls
console.log(sum(4, 6));
console.log(multiply(4, 6));

Output:

10
24

Example 2: Using the ‘export’ and ‘import’ Keywords: You can use the export keyword to specify which code you want to share, and then use the import keyword to access it in another file. 

• helper.js: For example, a file helper.js can be created as such:

Javascript

// Defining a function to be exported
function sum(a, b) {
    return a + b;
}

// Defining another function to be exported
function multiply(a, b) {
    return a * b;
}

// Exporting the functions
export { sum, multiply };

• main.js: Then, these functions may be called in another file, main.js as follows:

Javascript

// Importing the exported functions
// from the helper.js file
import { sum, multiply } from './helper.js';

// Function calls
console.log(sum(4, 6));
console.log(multiply(4, 6));

Output:

10
24

Example 3: Using module patterns: There are various patterns for organizing code in modules, such as the revealing module pattern and the Singleton pattern. These patterns can help you structure your code in a reusable way and hide implementation details.

• helper.js: For example, a file helper.js can be created as such:

Javascript

// Defining a Helper module
const Helper = (function () {

    // Defining a function to be exported
    function sum(a, b) {
        return a + b;
    }

    // Defining another function to be exported
    function multiply(a, b) {
        return a * b;
    }

    // Returning the functions
    return {
        sum: sum,
        multiply: multiply,
    };
})();

// Exporting the Helper module
export default Helper;

main.js: Then, these functions may be called in another file, main.js as follows:

Javascript

// Importing the Helper module
import Helper from './helper';

// Calling the imported functions
console.log(Helper.sum(4, 6));
console.log(Helper.multiply(4, 6));

Output:

10
24

In conclusion, there are a number of ways to share code between files in JavaScript. The most modern and recommended approach is to use the export and import keywords, which are part of the ECMAScript module system. This allows you to specify which code you want to share and access it from other files in a clear and concise way.

Alternatively, you can use module patterns, such as the revealing module pattern or the Singleton pattern, to organize your code in a reusable way. However, these approaches can be more verbose and may require more setup. You can also use global variables to share code, but this is generally not recommended as it can lead to naming conflicts and make it harder to understand how your code works.