With the import statement, functions can be imported between different modules. This avoids constant repetition of code snippets and as a result it simplifies the text. The syntax of this command must include the name parameter, which sends the command to the desired module.

Although in codes you can import scripts and modules using the <script> </script> tag, the import statement is more convenient. Its range of functions is larger, and it works in all environments, unlike the <script> </script> tag.

Import the whole module

If the module is large and we need all its functions, you can use the import statement to connect all the functionality at once. The * sign indicates that you want to import the functions of the entire module, and the as operator indicates the name of the desired module. The newly created module will be compared with it.

import * as MessageModule from "./message.js";

MessageModule.sayHello();

const telegram = new MessageModule.Messenger();
telegram.send(MessageModule.welcome);

In this case, we work with the message.js module, which has the ID MessageModule. You can choose any alias of the module in the design of the operator. It will serve as a name through which to access its functions.

In the example above, the function to be transferred is the sayHello command, it will be displayed in the code as:

MessageModule.sayHello();

Import individual module components

If you want to connect all the functions separately, or if you do not need all the functionality, you can import individual items through the import statement.

If we export a variable (welcome) from message.js to the main.js module, we have to spell the sayHello() function and the Messenger class in parentheses. The from statement indicates the module from which the import is coming.

import {sayHello, welcome, Messenger} from "./message.js";

sayHello();

const telegram = new Messenger();

telegram.send(welcome);

Import multiple unit values

If you insert the values foo and bar after the import statement in parentheses, they will fall into the current scope.

import {foo, bar} from '/modules/my-module.js';

Import using convenient names

Using the import statement, you can change the name of the modules during the import process. You can insert a shortName into the current scope through the as statement.

import {reallyReallyLongModuleExportName as shortName}
from '/modules/my-module.js';

Import multiple items

Modules that are exported can also change the value via the as statement and the shortName command.

import {
    reallyReallyLongModuleExportName as shortName,
    anotherLongModuleName as short
} from '/modules/my-module.js';

Import a module to use its side effect only

Often, in addition to calling basic functions, you need to work with side effects that are not specified in the code. The import statement in this case launches the global code of the module, without import of values.

import '/modules/my-module.js'

Import defaults

If in the exported module there is a possibility to set default export, then the import operator to carry out transfer of some values:

myModule is used as a namespace:

import myDefault, * as myModule from '/modules/my-module.js';

Named import of specific values:

import myDefault, {foo, bar} from '/modules/my-module.js';

Import variables

In this case, there are a few things to consider:

  1. Herein, variables behave as constants.

  2. For import, you should use the object where the variables are stored.

  3. import saves the link values exported from the external module, it can be used as a lock.

Therefore, only the following codes will work:

my-module.js:

export let obj = {a:2, b:4};

main.js:

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

obj.a = 1;
obj.b = 4;

Dynamic import

Using the standard syntax of the import statement we lose some functions. Although this type of import is better, there are cases when dynamic import should be preferred, because of some of its advantages, such as the ability to load the module conditionally or on demand. The key word in this statement will be await.

let module = await import('/modules/my-module.js');

Dynamic focus is similar in structure to function calling, so it is not compatible with call(), apply(), and bind() methods.