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:
Herein, variables behave as constants.
For import, you should use the object where the variables are stored.
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.