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:

src/test.jsexport 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:

src/index.jsbtn.addEventListener('click', function() {
  
});

Let's import a module using the import command:

src/index.jsbtn.addEventListener('click', function() {
  import('./test.js');
});

The import command returns a promise as its result:

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

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

src/index.jsbtn.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:

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

It can be destructured when importing:

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