ES6 modules, import, export, default
In the year 2015, ES6 scripts have provided help in structuring or arranging the existing program source code in a better order by using built-in program modules in JavaScript programming. Programmers can process large program source code applications by dividing them into smaller, more manageable small program source code pieces of source code by exporting and importing the capacity in software developers database program files. There are two primary reserved keywords in the module system in ES6 scripts. Which are applied as import and export keywords.
So, let’s know the ES6 script import and export keywords in JavaScript programming.
Export keyword in ES6 in JavaScript.
In any JavaScript program, the export keyword is used to export a function, class object or program variable from a program module so that those exported readymade program modules can be used in other program modules as per the need. There are two types of export modules in JavaScript. These are known as named exports and default exports.
Named Export Modules in JavaScript.
Named exports helps JavaScript programmers to export multiple values from a module. Where programmers can manually export program variables functions or class element objects separately with names.
Example of named exports in JavaScript.
// we use here file: math.js in program
export const total = (p, q) => P + q;
export const minus = (p, q) => p – q;
// with that optional we can export after below again they declaring
const product = (p, q) => p * q;
const divide = (p, q) => p / q;
export { product, divide };
Here in the named export program, all the elements total, minus, product, and divide will be exported from the math.js module file.
Default export module in JavaScript.
Default export helps JavaScript programmers to export a value from a program module, such as a program function, program class, or object. The default export is usually the “main” element exported in a program module, where it does not require any name when importing an object or element in default export.
Example of default export in JavaScript.
// let use export from file: calculator.js to apply default export method
export default function(p, q) {
return p * q;
}
Here in this condition, the default export is an anonymous program function that multiplies two separate integer values. While importing this function, the programmer does not need to apply curly braces, and the function can be named with any name.
Import Keyword in ES6 in JavaScript.
The import keyword is used in JavaScript programming to import export values from other program module functions. There are multiple methods to import two popular export functions, named and default.
Method of importing named exports in JavaScript.
In JavaScript programming, to import the named export element into a program, the programmer needs to use curly braces and the exact names of the export values.
Example of importing named exports in JavaScript.
// we use file: main.js to apply a importing named exports in JavaScript
import { total, minus } from ‘./math.js’;
console.log(total(1, 9)); // result is – 10
console.log(minus(30, 17)); // result is – 13
JavaScript programmers can import one or more named export function elements from any existing program module by listing them in curly braces.
Import Method of Default Exports in JavaScript.
While using default export import function in JavaScript programming, programmers do not need curly braces special symbol. Where programmers can provide their desired name in it.
Example of importing default export in JavaScript.
// we use here file: main.js to apply Default Exports method in JavaScript
import product from ‘./calculator.js’;
console.log(prduct(4, 2)); // result is – 8
Here in this program, two values have been imported from calculator.js module function, which was previously exported as default function.
Importing both named and default exports in JavaScript.
In JavaScript programming, programmers can import both named exports and default exports from the same module.
Example of importing both named and default exports in JavaScript.
// use of file: main.js to importing both named and default exports in JavaScript
import product, { total, minus } from ‘./math.js’;
console.log(total(7, 2)); // result is – 9
console.log(minus(10, 4)); // result is – 6
console.log(product(7, 4)); // result is – 28
In this program example, total and minus functions are named export functions, which are imported as multiply by default.
Renaming imports in JavaScript.
If needed in a program, you can also modify the name of imported members by using the as keyword.
Example of renaming imports in JavaScript.
// we use here file: main.js to Renaming imports in JavaScript
import { total as sum, minus as diff } from ‘./math.js’;
console.log(sum(3, 4)); // result is – 7
console.log(diff(9, 3)); // result is – 6
Here in this program, during the import method, the name of total has been changed to sum and the name of minus has been changed to diff.
Summary of import/export usage in JavaScript.
Named export method in JavaScript.
Export method in JavaScript.
export const test = ‘value’;
export function sample() { … }
Importing:
import { test, sample } from ‘./module.js’;
Default Exports:
Exporting:
export default function() { … }
// even yu can use or
export default class { … }
Importing:
import testFunction from ‘./module.js’; // here import module name can be anything
Importing Both:
import testFunction, { namedExportfunction1, namedExportfunction2 } from ‘./module.js’;
Practical example of export and import in JavaScript.
So let’s learn better about named exports and default exports in JavaScript.
file: math.js
// we use here Named exports method
export const total = (p, q) => p + q;
export const minus = (p, q) => p – q;
// we use here Default export method
export default function product(p, q) {
return p * q;
file: main.js
// here we use Importing both named and default exports for program
import product, { total, minus } from ‘./math.js’;
console.log(total(7, 3)); // the result is – 10
console.log(minus(9, 3)); // the result is – 6
console.log(product(4, 4)); // the result is – 16
Dynamic import optional method in JavaScript.
ES6 in JavaScript programming also supports dynamic imports, which allows programmers to import program modules in asynchronous order at runtime by applying the import() method.
Example of dynamic import in JavaScript.
// here we use the dynamic import method at program runtime
async function testModule() {
const { total } = await import(‘./math.js’);
console.log(total(8, 3)); // the result is – 11
}
testModule();
Here in this program, dynamic imports return a promise, which is converted to an export after the module is loaded in the program.
Dynamic import method in JavaScript programs is essential to load code only when needed, which helps to improve program performance by reducing the initial program loading time.
Summary of export and import method in JavaScript.
- Named exports – Named exports in JavaScript allow to export multiple values with specific names.
- Default exports – It helps to export a single value in the current program. Which can be imported into the program without curly braces.
- Import – Apply the import method to bring exports from other modules into the JavaScript program. Curly braces are required for named exports where as it is not for default exports.
- Renaming imports – JavaScript programmers can rename the import element by using the as text.
- Dynamic imports – JavaScript programmers can import modules in asynchronous order with the import() method.
