ES6: Modules

With ECMAScript 2015 (ES6) Modules become finally native to modern Browsers. In JavaScript Modules represent small units of independent, reusable code. They essentially make our code more maintainable and flexible. One file could contain one or multiple Modules. We can import and export them as per need. Therefore multiple Modules combined could also make up a larger Module. They are the foundation of many JavaScript design patterns and are critically necessary when building any non-trivial JavaScript-based application.

This being said, the concept of Modules itself is not new to the Javascript community. Developers so far usually fall back to one of the following options

• load multiple Javascript files into the Document (very bad for performance because each file needs to be requested and served individually)
• use separate Javascript files for Development and concatenate them into one file for Production (better performance-wise but fairly hard to maintain)

or the modern approach

• use a Library such as CommonJS or AMD (requireJS) to do the job (defacto standard which tools like Webpack make use of)

How it works

We declare our script tag with type “module” and let the Browser this way know that it is an ES6 Module.

We differentiate between named exports and default exports. We can have multiple named exports per file and one default export per file. With the keyword export we let the Javascript engine know that we want to export this Variable, Object, Array, Function or Class (technically also a Function). ES6 Modules are automatically strict-mode code, even if we don’t declare them with “use strict”. Also, everything declared within a Module is scoped to this Module and not automatically Global. The Scope in Javascript from top to bottom is:

• Global scope
• Module scope
• Function scope
• Block scope

Named Export

In the following example we will export multiple named variables, each representing a different Module. For simplicity we will store them all in one file but each of them could generally also be in it’s own file.

Import named export

In our index.js file we import module1, module2 and module3 from modules.js. When we import them as named exports we need to enclose them in brackets and use the correct name that was specified in the export. Then we will insert them into our index.html Document.

Default Exports

When we make a default export we don’t specify a name. We just write

• export default function foo()
• export default { foo: ‘bar’ }
• export default [‘arr1‘]
• export default ‘string’

Import default export

When we import a default export we don’t enclose it in brackets and can choose any name for it. In our example we will call it defaultModule for clarity.

ES6 Modules, allthough becoming now native to modern Browsers, will at the current stage most probably not change how code is organized in most existing projects. There is no real benefit of replacing native ES6 Modules with whatever Library is currently used. Especially since Browsers such as IE11 and older Browserversions of modern Browsers don’t support ES6 Modules at this time fully and therefore require some kind of fallback: https://caniuse.com/#search=modules

But it is only a matter of time until Modules are going to be the new standard and especially for smaller projects that don’t have an elaborate build process it could be a real benefit to use the native implementation.