ES6 Modules

Modules

JavaScript modules enable you to divide your code into individual files.

This makes it easier to manage the codebase.

ES Modules rely on the import and export statements.

You can export a function or variable from any file.

Let us create a file called person.js and fill it with the data we wish to export.

There are two sorts of exports: named and default.

You can generate named exports in two methods. In-line individually or all at once at the bottom.

In-line individually:

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 must be destructured using curly braces. Default exports do 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";