Dynamic import of ES modules in JavaScript

ES modules can be imported dynamically. This feature is sometimes useful. Let's see how it's done. Let's say we have the following module:

export function func1() { return '1' } export function func2() { return '2' } export default function() { return 'text'; };

Suppose we want to import this module not immediately, but by some event, for example, by clicking on a button:

btn.addEventListener('click', function() { });

Let's import a module using the import command:

btn.addEventListener('click', function() { import('./test.js'); });

The import command returns a promise as its result:

btn.addEventListener('click', function() { import('./test.js').then(mod => { }); });

The object with exported functions will get into the callback variable:

btn.addEventListener('click', function() { import('./test.js').then(mod => { let res1 = mod.func1(); let res2 = mod.func2(); console.log(res1, res2); }); });

What is exported by default will be in the default key:

btn.addEventListener('click', function() { import('./test.js').then(mod => { let dfn = mod.default(); console.log(dfn); }); });

It can be destructured when importing:

btn.addEventListener('click', function() { import('./test.js').then(({func1, func2}) => { let res1 = func1(); let res2 = func2(); console.log(res1, res2); }); });

Create a module that exports an array of the week days names. On a button clicking, import this module and display the days of the week as an ul list.