This is still a work in progress. New content is synced here as it gets ready.
ES Modules Import/Export
This is not about international trade. Modern JavaScript introduced these 2 statements to provide a solution for “module dependency management”.
| Module dependency management is just the fancy term to describe JavaScript files that need each other. |
A file X that needs to use a function from file Y can use the import statement to declare this dependency. The function has to be exported first in order for any other files to import it. For that, you can use the export keyword:
Y.js
export const functionY() {
}
Now any file can import this named functionY export:
X.js
import {functionY} from './Y'; // Assuming X & Y are same-level
// functionY();
The {functionY} syntax is not destructuring! It’s importing of a named export. You can also export without names using this other syntax:
Y.js
export default function () {
}
When you import this default Y export, you can give it any name you want:
X.js
import funcion42 from './Y'; // function42();
| While default exports have their advantages, named exports play much better with intelligent IDEs that offer discoverability, autocomplete, and other features. Prefer to use named exports especially when you’re exporting many items in a module. |