HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
JavaScript modules allow you to break up your code into separate files
JavaScript modules allow you to break up your code into separate files.
This makes it easier to maintain the code-base.
JavaScript modules rely on the import
and export
statements.
You can export a function or variable from any file.
Let us create a file named person.js
, and
fill it with the things we want to export.
There are two types of exports: Named and Default.
You can create named exports two ways. In-line individually, or all at once at the bottom.
person.js
export const name = "Jesse";
export const age = 40;
person.js
const name = "Jesse";
const age = 40;
export {name, age};
Let us create another file, named message.js
, and
use it for demonstrating default export.
You can only have one default export in a file.
message.js
const message = () => {
const name = "Jesse";
const age = 40;
return name + ' is ' + age + 'years old.';
};
export default message;
You can import modules into a file in two ways, based on if they are named exports or default exports.
Named exports are constructed using curly braces. Default exports are not.
Import named exports from the file person.js:
import { name, age } from "./person.js";
Import a default export from the file message.js:
import message from "./message.js";
Modules only work with the HTTP(s) protocol.
A web-page opened via the file:// protocol cannot use import / export.