Before understanding the import and require difference, we need to understand the JavaScript module.
JavaScript module
To create a module in JavaScript, split JavaScript programs into separate files and import them when needed. The module is a JavaScript file that contains some variables and functions. We can call them by using import and require. The module reduces the code in our javascript file.
Modules often contain a class or a library of functions used for a specific purpose. Below is an example of the module.
- CommonJS
- UMD — Universal Module Definition
- AMD
- Require.js
- Es6 module
JavaScript require()
The require() method is commonly used with Node.js to read and execute CommonJS modules. The require() statement fundamentally reads a JavaScript file, executes it, and returns the export object. In addition, the require() statement allows the addition of built-in core NodeJS modules and community-based and local modules.
Syntax
// get built-in modules
const path = require('path');
// get local modules
const localModule = require('./locaModule');
In the above syntax, we get Node.js built-in module path. And on the other line, we get our local module. These modules can be either built-in modules like http or custom-written modules. With require() method, you can include them in your JavaScript files and use their functions and variables.
Javascript import()
To import a module in a JavaScript file, use the import() function. Import statements are introduced in the JavaScript ES6 version. We can not import files that have the .json extension. If we need to use an embedded script using import, then script type = “module” is compulsory.
Syntax
import myModule from “./myModule”;We put a list of what to import in curly braces import {…}, like this,
Example
import {appLang(), letsPlay()} from './say.js';
appLang('English'); // Johnny, English!
letsPlay('Carrom'); // Let's Play, Carrom!JavaScript import vs. require
To use the require() statement in JavaScript, a module must be saved with a .js extension. To use the import() statement, save the file the .mjs extension. You can load ES modules dynamically via the import() function which you can not load using require() function.
Defining system
Usually, we call the import and require statement at the top of our program file, so we quickly read them. If we don’t define the import statement on top of the file, it will give an error. So it’s better to define a require and import statement on top of the file.
Calling system
require()
We can call require() anywhere in the program. We can also call require() functions conditionally inside the program. If we conditionally require a statement so we can reduce our program file size.
Example
if(request > 5){
const http = require('http');
}Usually, require() function is called at the run time in a JavaScript program.
import()
We can not call import statements conditionally in our program. Usually, import () is a static function, so we can find the error before running the JavaScript file. The import statement is asynchronous. If we have hundreds of modules in our application, import statements can easily be handled asynchronously.
What to use import() or require() in JavaScript
If we use a Node.js application, we use a require() function because node js libraries and modules are written in CommonJS. But if we use JavaScript in the front-end in React js or any other library, use the import statement and if we use the ES6 module in JavaScript, use the import statement.
As we discuss if we have multiple modules, it’s better to use import because it performs operations asynchronously.
That’s it for JavaScript import vs require tutorial.
See also
How to write comments in JavaScript
Niva Shah is a Software Engineer with over eight years of experience. She has developed a strong foundation in computer science principles and a passion for problem-solving.