When we are building applications there are 2 options
- To write all code in single file
- To divide the code in different sections and reuse them
If your project codebase is very small and it might not grow in near future, then you are free choose between the 2 options. But as the project codebase grows it is very difficult to understand and maintain the code in a single file. So, It is always a good practice to have your codebase structured and is not written entirely in a single file.
What is a Module?
- Module is just a piece of JavaScript code which you want to reuse
So, How can we use Modules?
- You have to export a Module so that it is available to import
There are 2 ways to export
- Named Export
- Default Export
Named Export
// Simple JS code
// File name - simple.js
export const PI = 3.14;
export function named_func1(){
return "I am a named export from named_func1";
}
export function named_func2(){
return "I am a named export from named_func2";
}
export default function default_func(){
return "I am a default export"
}
How to import modules in other files?
// named import
import { PI, named_func1, named_func2} from 'simple';
// default import
import default_func from 'simple';
Important thing to note here:
- We should have only 1 default export for 1 file
- We can have more than 1 named export for 1 file
- You can import different modules from different files in a single file
Importing Modules as Alias
// Aliasing named import
import { named_func1 as func} from 'simple';
// Aliasing default import
import default_func_name from 'simple';
If you observe the above example, the default import can be named anything, need not me same as the name you exported.
So, can we import modules conditionally or dynamically on demand?
- short answer, Yes
Let us look into how we can dynamically import modules in JavaScript
import('simple.js')
.then((module) => {
module.default_func()
module.named_func2()
});
Or, we can also use the async and await syntax
let module = await import('simple.js');
// this should be in the async function
Now that we have seen the syntax of the dynamic import, let's see when do we actually use
- When the module you want to import doesn't exist at load time
- When you don't want to import the module until it is required
- When you want to import conditional module which occupies heavy memory
- Import from regular script instead of module
- Compute the module specifier at runtime
Note:
- Use dynamic imports only when required
- Dynamic imports work in regular scripts, they don’t require script type="module"
- Although import() looks like a function call, it’s a special syntax that just happens to use parentheses (similar to super())
Reference: