How To Include a JavaScript File in Another JavaScript File?
Last Updated :
28 Oct, 2024
The import and export syntax available in ES6 (ECMAScript 2015) module is used to include a JavaScript file in another JavaScript file. This approach is the most modern and recommended way to share code between JavaScript files.
It allows you to break your code into smaller modules and then import the needed functions, classes, or variables from one file into another.
Using ES6 Modules (import and export)
With ES6, you can export code from one file and import it into another. This method is the simplest way to include a JavaScript file in another.
Example: In the math.mjs file, export the functions or variables:
JavaScript
// math.mjs
export function add(n1, n2) {
return n1 + n2;
}
export const pi = 3.14159;
In the main.mjs file, import the exported functions or variables
JavaScript
// main.mjs
import { add, pi } from './math.mjs';
console.log(add(2, 3));
console.log(pi);
Output
5
3.14159
In this example, the add function and the pi constant are exported from the math.mjs file and imported into the main.mjs file using the import statement.
Note: If you are going to use ES6 modules in a node js environment, remember to name your files with .mjs extension or set "type": "module" in the package.json file.
Using require() Method (CommonJS)
In Node.js or environments that support CommonJS, you can use the require() function to include one JavaScript file in another. This approach is commonly used in Node.js.
Example:
JavaScript
// math.js
function add(n1, n2) {
return n1 + n2;
}
const pi = 3.14159;
module.exports = { add, pi };
In the main.js file, use require() to import the module:
JavaScript
// main.js
const { add, pi } = require('./math.js');
console.log(add(2, 3));
console.log(pi);
Output
5
3.14159
Here, module.exports is used to export the add function and pi constant, and require() is used to import them in another file.
If you are working with JavaScript in a browser environment, you can include multiple JavaScript files by using <script> tags in your HTML file. You can load external JavaScript files this way.
HTML
<!-- index.html -->
<head>
<script src="math.js"></script>
<script src="main.js"></script>
</head>
<body>
<h1>JavaScript File Inclusion</h1>
</body>
In this example, both math.js and main.js will be loaded in the specified order.
Which Approach Is Better in Different Cases?
- ES6 Modules (import/export): This is the preferred approach for modern JavaScript applications. It is well-suited for both client-side and server-side JavaScript and works well with tools like Webpack.
- require() (CommonJS): CommonJS is primarily used in Node.js. If you are working in a Node.js environment, using require() is still common, but ES6 modules are now supported as well.
- Using <script> Tags: This is suitable for simple projects or when you need to load JavaScript files directly in an HTML file. However, for complex projects, module bundlers like Webpack or ES6 modules are recommended.
Similar Reads
How to write a function in JavaScript ? JavaScript functions serve as reusable blocks of code that can be called from anywhere within your application. They eliminate the need to repeat the same code, promoting code reusability and modularity. By breaking down a large program into smaller, manageable functions, programmers can enhance cod
4 min read
What is Currying Function in JavaScript? Currying is used in JavaScript to break down complex function calls into smaller, more manageable steps. It transforms a function with multiple arguments into a series of functions, each taking a single argument.It converts a function with multiple parameters into a sequence of functions.Each functi
3 min read
How to call JavaScript function in HTML ? In HTML, you can easily call JavaScript functions using event attributes like onclick and onload. Just reference the function name within these attributes to trigger it. You can also call functions directly within script blocks using standard JavaScript syntax. Let's create an HTML structure with so
2 min read
setTimeout() in JavaScript The setTimeout() function is used to add delay or scheduling the execution of a specific function after a certain period. It's a key feature of both browser environments and Node.js, enabling asynchronous behavior in code execution.JavaScriptsetTimeout(function() { console.log('Hello, world!'); }, 2
2 min read
What is a typical use case for anonymous functions in JavaScript ? In this article, we will try to understand what exactly an Anonymous function is, and how we could declare it using the syntax provided in JavaScript further we will see some examples (use-cases) where we can use anonymous functions to get our results in the console. Before proceeding with the examp
4 min read
How to check whether a number is NaN or finite in JavaScript ? When working with numbers in JavaScript, it's important to know how to determine if a value is NaN (Not-a-Number) or finite. This knowledge is crucial for data validation, error handling, and ensuring your code behaves as expected. In this article, we will see how to check whether the number is NaN
3 min read
How to Encode and Decode a URL in JavaScript? Encoding and decoding URLs in JavaScript is essential for web development, especially when making GET requests with query parameters. This process ensures special characters in URLs are correctly interpreted by the server. For instance, spaces are converted to %20 or + in URLs. This guide covers how
4 min read
How to declare the optional function parameters in JavaScript ? Declaring optional function parameters in JavaScript means defining function parameters that aren't required when the function is called. You can assign default values to these parameters using the = syntax, so if no argument is provided, the default value is used instead. These are the following ap
3 min read
How to get the javascript function parameter names/values dynamically ? In this article, we are given any arbitrary JavaScript function and the task is to return the parameter names of the function. Approach: JavaScript contains a method called toString() which is used to represent a function code in its string representation. This method is used to get the parameter na
2 min read
How To Include a JavaScript File in Another JavaScript File? The import and export syntax available in ES6 (ECMAScript 2015) module is used to include a JavaScript file in another JavaScript file. This approach is the most modern and recommended way to share code between JavaScript files.It allows you to break your code into smaller modules and then import th
4 min read