diff --git a/1-js/13-modules/03-modules-dynamic-imports/article.md b/1-js/13-modules/03-modules-dynamic-imports/article.md index a723566c..83b85b55 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -1,8 +1,6 @@ # Dynamic imports -Export and import statements that we covered in previous chapters are called "static". - -That's because they are indeed static. The syntax is very strict. +Export and import statements that we covered in previous chapters are called "static". The syntax is very simple and strict. First, we can't dynamically generate any parameters of `import`. @@ -24,27 +22,27 @@ if(...) { } ``` -That's because `import`/`export` aim to provide a backbone for the code structure. That's a good thing, as code structure can be analyzed, modules can be gathered and bundled together, unused exports can be removed ("tree-shaken"). That's possible only because the structure of imports/exports is simple and fixed. +That's because `import`/`export` aim to provide a backbone for the code structure. That's a good thing, as code structure can be analyzed, modules can be gathered and bundled into one file by special tools, unused exports can be removed ("tree-shaken"). That's possible only because the structure of imports/exports is simple and fixed. But how can we import a module dynamically, on-demand? -## The import() function +## The import() expression -The `import(module)` function can be called from anywhere. It returns a promise that resolves into a module object. +The `import(module)` expression loads the module and returns a promise that resolves into a module object that contains all its exports. It can be called from any place in the code. -The usage pattern looks like this: +We can use it dynamically in any place of the code, for instance: -```js run -let modulePath = prompt("Module path?"); +```js +let modulePath = prompt("Which module to load?"); import(modulePath) .then(obj => ) - .catch(err => ) + .catch(err => ) ``` Or, we could use `let module = await import(modulePath)` if inside an async function. -For instance, if we have the following `say.js`: +For instance, if we have the following module `say.js`: ```js // 📁 say.js @@ -75,12 +73,12 @@ export default function() { } ``` -...Then, in order to access it, we can use `default` property of the module object, as explained in the [previous chapter](info:import-export). - -So, the dynamic import will be like this: +...Then, in order to access it, we can use `default` property of the module object: ```js -let {default: say} = await import('./say.js'); // save .default property in say variable +let obj = await import('./say.js'); +let say = obj.default; +// or, in one line: let {default: say} = await import('./say.js'); say(); ``` @@ -96,5 +94,5 @@ Dynamic imports work in regular scripts, they don't require `script type="module ```smart Although `import()` looks like a function call, it's a special syntax that just happens to use parentheses (similar to `super()`). -So we can't copy `import` to a variable or use `.call/apply` with it. +So we can't copy `import` to a variable or use `.call/apply` with it. That's not a function. ```