Today, we’ll learn about importing in Javascript. A single file application doesn’t exist. Even if you build smaller applications, importing all the other dependencies can make your code look messy. It will become really hard to find which files are imported, and debugging the code.
Fortunately, we have import and export features in JavaScript.
An Overview of Importing in JavaScript
An import statement in JavaScript is used when you want to import or want to use bindings that exist in some other file or module. This is an ES6 Syntax.
We just cannot have an application written within a single file. Hence, we must export parts of our code and use them in different modules/files by importing them.
It is easier to understand, manage and debug bite-sized and separated code rather than boatloads of it altogether in a single file ending up in a never-ending scroll! That’d be a nightmare!
The core idea behind this import feature is to keep files compact and focus on minimal tasks and components at a time.
Normally, you could be using the ‘require’ module to import files and module.exports to export chunks of your code. Since this is an ES6 Syntax, importing is done via the import statement, and export is done via export default or export statement.
The idea, however, is the same. Moreover, the embedded scripts that you are trying to import, must have a type = ‘module’.
Dynamic import() Function
With the dynamic import() function, you do not need your scripts to be a type = ‘module’.
Dynamic import is used in situations when you want to import a module based on a condition or on-demand.
Import Syntaxes
Below are the many import syntaxes provided by the Official MDN Docs. These vary as per the number of contents we’re importing from a module.
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
const promise = import("module-name");
The parameters used in the above code snippet:
defaultExport
Refers to the name that will indicate the default export from the module.
module-name
Refers to the file/module to import from. This could be a relative or an absolute path of the .js file which will consist of our module. Make sure you only use single or double-quoted strings here.
name
Refers to the name of the module object. This will be more like a namespace when the imports are referred.
exportN
Refers to the specific exports you want to import.
aliasN
Refers to the name of the named imports.
import * as name
This will import all exports from a module.
Clarifying Each Syntax with Examples
Importing Entire Contents of a Module
This will insert sampleModule into the current scope and will contain all the exports from the module in the file located in the path: /modules/sample-module.js.
In this case, accessing exports refer to using the module name, ‘sampleModule’ in this case, as a namespace. Suppose, sampleModule exports giveMeANumber(), we may then call it like this:
Importing a Single Export from a Module
Let’s say an object or value with the name sampleExport has been exported from sample-module.js module, implicitly (using export * from ‘something.js’) or explicitly (using the export statement), will be inserted into the current scope.
Importing Multiple Exports from a Module
This will import both carrotRecipes and beetRecipes into the current scope, like this:
Importing an Export with a More Convenient Alias
With this syntax, you can rename an export while importing it. Let’s have a look at an example:
from '/modules/sample-module.js';
Rename Multiple Exports while Importing
With the help of this syntax, we can rename multiple exports while we import, with convenient aliases.
whyIsThisSoLongModuleExportName as cuteName,
thisIsStillLongModuleName as short
} from '/modules/sample-module.js';
Importing a Module for its Side Effects
You only want the side-effects of an entire module, but don’t want to import it. You can simply use this way to work it out. This will just run the global code of the module and won’t actually import any values!
You may also use it with dynamic imports:
if (thisIsTrue) {
// import module just for side effects
await import('/modules/sample-module.js');
}
})();
Importing Defaults
You might have a default export such as an object, a class, a function, etc. The import statement will help you import your defaults easily.
The simplest and direct way to import defaults:
we may also make use of the syntaxes we’ve had a look at a while ago. Make sure you declare the default import first.
// sampleModule shall be used as a namespace
OR
// specific, named imports
When you want to import a default export using dynamic imports, this will be a bit different. You must first destructure the default and rename the “default” key from the returned object.
if (thisIsTrue) {
const { default: customDefault, carrotRecipes, beetRecipes } = await import('/modules/sample-module.js');
}
})();
Dynamic Imports
In situations when you wish to import conditionally or on-demand, you may use dynamic import.
To do this, the import keyword may be called a function. This will then return a promise.
.then((module) => {
// Your custom function.
});
This form is also compatible with the await keyword.
Conclusion
A single file application doesn’t exist. When you build even smaller applications, you just cannot type all those thousands of lines of code in one single file!
Fortunately, we have import and export features in JavaScript, which I have discussed in this post.
Noteworthy References
Import in JavaScript – MDN Official Docs
JavaScript Import Statement – AppDividend
