JS MASTER CLASS /// EXPORT /// IMPORT /// DEFAULT /// MODULES /// JS MASTER CLASS /// EXPORT /// IMPORT /// DEFAULT /// MODULES ///

JavaScript Modules

Keep your code clean. Learn to split logic across files with ES Modules (import, export, default).

module.js
1 / 12
12345
📦

Tutor:As JavaScript applications grow, keeping all code in one file becomes impossible. Modules solve this by letting you split your code into independent files. Each file is a module.


Skill Matrix

UNLOCK NODES BY MASTERING MODULES.

Concept: Named Exports

Named exports allow multiple exports per module. Wrap their names in curly braces when importing.

System Check

How do you import a named export 'calc' from 'math.js'?

Community Holo-Net

Showcase Your Architecture

ACTIVE

Built a complex modular project? Share your folder structures and module strategies.

Support Us

JavaScript Modules

Author

Pascual Vila

Fullstack Instructor // Code Syllabus

Before ES6 (2015), JavaScript had no native module system. Developers had to use multiple <script> tags or rely on external libraries. Today, ES Modules (ESM) allow us to export and import code seamlessly.

Named Exports

You can export multiple variables or functions from a file using named exports. When you import them, you must use their exact names wrapped in curly braces {}.

Default Exports

A file can have only ONE default export. This is useful when a module is primarily designed to do one specific thing (like a React Component). When importing a default export, you do not use curly braces, and you can name the imported variable whatever you want.

Aliases

If you import two functions with the same name from different modules, your code will break. To fix this, use the as keyword to rename them upon import.

View Full Transcript+

In HTML, to load a JavaScript module, you must add type="module" to the script tag. Modules are deferred by default, meaning they load in parallel and execute after the HTML document is parsed. Furthermore, modules strictly operate in "strict mode" automatically. This prevents the usage of undeclared variables and helps write cleaner code.

Module Glossary

Named Export

Exporting multiple values from a module using specific variable/function names.

snippet.js

Default Export

Exporting a single fallback value for a module.

snippet.js

Named Import

Importing specific exported variables from a module. Requires curly braces.

snippet.js

Default Import

Importing the default export of a module. No braces needed.

snippet.js

Import Alias (as)

Renaming an import to avoid variable name collisions.

snippet.js

Wildcard Import (*)

Imports all exported members of a module as a single object.

snippet.js