Require vs. Import in JavaScript

In JavaScript, the require and import keywords are used to import modules. require is a function used to import modules in Node.js, while import is a new keyword that is used to import modules in ECMAScript 6 (ES6).

require is a synchronous operation and will block the execution of the script until the module is loaded and ready to be used. import, on the other hand, is an asynchronous operation, so the script will not be blocked while the module is loading.

One of the main differences between require and import is that require can only be used to import modules, whereas import can be used to import both modules and individual exports from those modules.

An individual export is a single value, function, or object that is exported by a module and can be imported and used by other code.

For example, if you have a module named myModule, you can use require to import the entire module like this:

const myModule = require('myModule');

To import a specific export from the module, you would need to use the . notation like this:

const myFunction = require('myModule').myFunction;

Using import, you can import the entire module and all of its exports like this:

import * as myModule from 'myModule';

Or you can import a specific export like this:

import {myFunction} from 'myModule';

In general, import is preferred over require because it is a more modern and flexible syntax, and it will eventually replace require in the language. However, require will continue to be supported in Node.js, so you can use either syntax depending on your needs and preferences.

import()

One of the main benefits of import is that it allows you to choose which bindings you want to import from a module rather than importing the entire module as a single object.

This can help reduce the amount of code you need to write, and can make your code easier to read and understand.

Here is an example of how you can use the import keyword to import specific bindings from another module:

// moduleA.js

export const x = 1;
export const y = 2;

// moduleB.js

import { x, y } from './moduleA';

console.log(x); // outputs 1
console.log(y); // outputs 2

The Webpack module bundler has a built-in caching system that can be used to cache modules that are imported using the import keyword. And so does Rollup and others.

require()

In the context of Node.js – require() is a built-in function for including external modules that exist in separate files. The statement reads a JavaScript file, executes it, and then returns the exported object.

// app.js

const _ = require('lodash');

const arr = [1, 2, 3];

const sum = _.sum(arr);

console.log(sum); // outputs 6

One important thing to note about require() is that it is synchronous, which means that it blocks the execution of the code until the module has been loaded.

On the bright side – require() uses a caching system to ensure that modules are only loaded once, even if multiple files require them. This means that when you use require() to load a module, Node.js first checks to see if the module has already been loaded and cached. If it has, it will return the cached version of the module rather than loading and parsing it again.