Javascript Advanced: A List of the Features of ES6 – Part III

Modules in Javascript

Large scripts were typically not required because JavaScript programs were initially used mostly for solitary scripting chores that added a little amount of interaction to your web pages when necessary. After some time has passed, JavaScript is now widely utilized in different settings and is used to run full apps in browsers (Node.js, for example).

The language-level module support component definition. patterns from well-known JavaScript module loaders are codified (AMD, CommonJS). A default loader set by the host determines runtime behavior. No code runs until all requested modules have been processed and are available, which is an implicit async model.

The good news is that contemporary browsers have begun to natively support module functionality, and this is the focus of this essay. The ability of browsers to minimize module loading makes it more effective than using a library and requires additional client-side processing and round trips.

The import and export statements are necessary for the use of native JavaScript modules.

Import Module

To import read-only live bindings that are exported by another module, use the static import declaration. The imported bindings are known as live bindings because the module that exported the binding can update them, but the importing module cannot change them.

In order to use the import declaration in a source file, the file must be interpreted by the runtime as a module. In HTML, this is done by adding type=”module” to the <script> tag. Modules are automatically interpreted in strict mode.

There is also a function-like dynamic import(), which does not require scripts of type = “module”.

Syntax of Import Module

import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { default as alias } from "module-name";
import { export1, export2 } from "module-name";
import { export1, export2 as alias2, /* … */ } from "module-name";
import { "string name" as alias } from "module-name";
import defaultExport, { export1, /* … */ } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

defaultExport: name that will be used to identify the module’s default export. The identifier must be legal in JavaScript.

module-name: the import source module. The host determines how the specifier is evaluated. This is frequently an absolute or relative URL to the module’s.js file. Extension-less imports in Node frequently make reference to packages in node modules. Check your environment; some bundlers might let you import files without extensions. Strings may only be single-quoted or double-quoted.

name: When referring to imports, the name of the module object will be utilized as a sort of namespace. The identifier must be legal in JavaScript.

exportN: names of the imported exports. Depending on the exports that module-name defines, the name may either be an identifier or a string literal. It must be aliased to a legitimate identifier if it is a string literal.

aliasN: names used to identify the specified imports. The identifier must be legal in JavaScript.

• Named import: import { export1, export2 } from “module-name”;
• Default import: import defaultExport from “module-name”;
• Namespace import: import * as name from “module-name”;
• Side effect import: import “module-name”;

Named Import

This puts myExport into the current scope given a value with the name myExport that has been exported from the module my-module either implicitly (using the export * from ‘another.js’) or explicitly (using the export statement).

Example:

import { myExport } from '/modules/my-module.js';
import { foo, bar } from '/modules/my-module.js';
import {
   foo,
   bar,
   foo1,
   bar1,
   myExport1,
   myexport2
 } from '/modules/my-module.js';
 import {
   reallyReallyLongModuleExportName as shortName,
 } from '/modules/my-module.js';

A member that is not a valid identifier may be exported by a module as a string literal; in this case, you must alias the member in order to use it in the current module.

Exported from ‘/modules/my-module.js’

Example:

const cumulativeSum = (a,b) =>{
   let sum = (a*4 + b*3);
   return sum;
}
 
const add = cumulativeSum(3.5, 3.75);
 
export { add };

Imported from ‘/modules/my-module.js’

Example:

import { add } from '/modules/my-module.js';

Default Import

The matching default import syntax must be used to import default exports. The most straightforward option simply imports the default shown down below. You are free to give the identifier any name you choose, as the default export leaves the name blank.

A default import can also be specified with namespace imports or named imports. In these circumstances, the default import must be declared first. For explanation:

The results of importing a default import are the same as importing a default name. The name must be aliased because the word “default” is a reserved word.

Example:

import myDefault from '/modules/my-module.js';
import myDefault, * as myModule from '/modules/my-module.js';
// myModule.default and myDefault point to the same binding
 
import myDefault, { foo, bar } from '/modules/my-module.js';
import { default as myDefault } from '/modules/my-module.js';

Namespace Import

The code that follows adds myModule, which contains all of the exports from the module found at /modules/my-module.js, to the current scope.

In this case, the namespace object represented by myModule has all exports as properties. For instance, you would use the following syntax to call the export doAllTheAmazingThings() from the module imported earlier:

Example:

import * as myModule from '/modules/my-module.js';
 
myModule.doAllTheAmazingThings();

Side Effect Import

Import a full module without any other imports in order to test for side effects. While this executes the module’s global function, no values are actually imported. This is frequently applied to polyfills that modify global variables.

Example:

import '/modules/my-module.js';

Export Module

Named export and default export is the two export kinds that any module is allowed to have. Each module can have an unlimited number of named exports, but only one default export. Each type matches one of the aforementioned syntaxes.

Use the export declaration in order to export values from a JavaScript module. The import declaration or dynamic import can then be used to import exported values into other programs. When a module adjusts the value of a binding that it exports, the update will be visible in the binding’s imported value. As a result, the value of an imported binding may change in the module that exports it.

In order to use the export declaration in a source file, the file must be interpreted by the runtime as a module. In HTML, this is done by adding type=”module” to the <script> tag, or by being imported by another module. Modules are automatically interpreted in strict mode.

Syntax of Export Module

Example:

// Exporting declarations
export let name1, name2/*, … */; // also var
export const name1 = 1, name2 = 2/*, … */; // also var, let
export function functionName() { /* … */ }
export class ClassName { /* … */ }
export function* generatorFunctionName() { /* … */ }
export const { name1, name2: bar } = o;
export const [ name1, name2 ] = array;
 
// Export list
export { name1, /* …, */ nameN };
export { variable1 as name1, variable2 as name2, /* …, */ nameN };
export { variable1 as "string name" };
export { name1 as default /*, … */ };
 
// Default exports
export default expression;
export default function functionName() { /* … */ }
export default class ClassName { /* … */ }
export default function* generatorFunctionName() { /* … */ }
export default function () { /* … */ }
export default class { /* … */ }
export default function* () { /* … */ }
 
// Aggregating modules
export * from "module-name";
export * as name1 from "module-name";
export { name1, /* …, */ nameN } from "module-name";
export { import1 as name1, import2 as name2, /* …, */ nameN } from "module-name";
export { default, /* …, */ } from "module-name";

nameN: exportable identifier so that it may be imported into another script using import). The actual exported name, which might not be a legal identifier, can be provided as a string literal if you use an alias with as.

Named Export

You can declare functions or classes after the export keyword, as well as let, const, and var declarations. The export name1, and name2 syntax can also be used to export a list of names that have been defined elsewhere. Keep in mind that the no-op declaration export does not export an empty object (an empty name list).

Example:

export { myFunction2, myVariable2 };
 
 
export let myVariable = Math.sqrt(2);
export function myFunction() { /* ... */ };

Temporal dead zone regulations do not apply to export declarations. Even before the name X is specified, it is possible to specify that the module exports X.

Example:

export { x };
const x = 1;

Default Export

Example:

// export feature declared elsewhere as default
export { myFunction as default };
// This is equivalent to:
export default myFunction;
 
// export individual features as default
export default function () { /* … */ }
export default class { /* … */ }
 
// each export overwrites the previous one

Example: Default export syntax

export default 1 + 1;

When you want to export many values, named exports are helpful. The default export can be imported with any name, however, named exports must be referred to by their precise name (optionally renaming it with as). Functions and classes are exported as declarations rather than expressions as a particular case, and these declarations may be anonymous. Thus, there will be hoisting of functions.

Example:

 
foo();
 
export default function foo() {
 console.log("Hi");
}
 
 
export default function () {
 console.log("Hi");
}

Promises

The eventual success (or failure) of an asynchronous operation and its associated value are represented by the Promise object. We suggest reading “Using promises” first if you want to understand how promises function and how to utilize them.

A promise is a stand-in for a value that isn’t always known at the time the promise is made. It enables you to link handlers to the ultimate success or failure value of an asynchronous action. This enables asynchronous methods to return results similarly to synchronous methods: rather than delivering the result right away, the asynchronous function returns a promise to provide the result at a later time.

Among the following states is A Promise:

1.  Pending: in the preliminary stage, neither accepted nor rejected.
2. fulfilled: denoting that the task was successfully done.
3. rejected: denoting that the procedure was unsuccessful.

A pending promise can eventually be fulfilled with a value or denied with a reason (error). The corresponding handlers are queued up by a promise, and the method is called when either of these scenarios occurs. There won’t be a race condition between an asynchronous operation finishing and its handlers being attached if the promise has already been fulfilled or refused when the handler is attached.

If a promise is either kept or broken, but not both, it is considered to be settled.

Example:

const myFirstPromise = new Promise((resolve, reject) => {
 
 setTimeout(() => {
   resolve("Awesome!");
 }, 250);
});
 
myFirstPromise.then((successMessage) => {
 console.log(`Enablegeek is ${successMessage}`);
});

Output:

Enablegeek is Awesome!