Introduction

If you've spent any time working with Javascript over the past 5 or so years, you've probably come across Javascript Imports and Exports. Introduced as part of the ECMAScript 6 (ES6) specification in June 2015 and now supported in all major browsers, Imports and Exports have shaped the way we build modern Javascript applications. In the beginning, Javascript wasn't designed to be modular. However, 2009 saw the release of Node JS, a popular JavaScript runtime environment that runs outside the browser. Node JS soon began supporting modularity through the CommonJS require function and with this developers began searching for solutions to bring modularity to Javascript in the browser.

What is modularity in Javascript

A Javascript module is a file that can export variables, functions, and classes that can be imported anywhere, allowing developers to share code across multiple files or projects.

Exporting from Javascript modules

Exporting variables, functions, and classes is made simple in Javascript with the export keyword, allowing developers to specify which data/functionality they would like accessed outside the module. Take the following example of a Dice module:

const NUMBERS = [1, 2, 3, 4, 5, 6];

function min() {
    return Math.min(...NUMBERS);
}

function max() {
    return Math.max(...NUMBERS);
}

export function roll() {
    return Math.floor((Math.random() * max()) +  min());
}

The Dice module exports a single function, rollDice(), making it the only data/functionality available to be imported elsewhere. In some cases, the developer may decide that more than one piece of data/functionality, or even all data/functionality should be available outside of the Dice module. In this case, the developer could simply prefix each variable and function with the export keyword:

export const NUMBERS = [1, 2, 3, 4, 5, 6];

export function min() {
    return Math.min(...NUMBERS);
}

export function max() {
    return Math.max(...NUMBERS);
}

export function roll() {
    return Math.floor((Math.random() * max()) +  min());
}

Now every variable and function in the Dice module can be imported individually elsewhere. However, in cases where there is lots of data/functionality to be imported, importing everything individually can become frustrating. Thankfully Javascript also provides developers with the default keyword. Using the default keyword, developers can specify a default export. In the Dice module, the developer could create a default export to make all of the module data/functionality available elsewhere with an import-defined prefix:

export default {
    NUMBERS,
    min,
    max,
    roll
}

Importing from Javascript modules

What and how a developer imports data/functionality from a Javascript module depends entirely on what data/functionality the developer would like to make use of and how the module exports that data/functionality. In the Dice module, there is individually exported data/functionality and a default export.

Importing a default export

The syntax for importing default exports in Javascript is simple. If the developer was to import the default export from the Dice module it may look like this:

import Dice from './modules/dice.js';

NOTE: ./modules/dice.js is the path to the file.

The developer could now reference the default export as Dice, giving them access to everything in the default export object as: Dice.NUMBERS, Dice.min(), Dice.max(), Dice.roll().

To prevent potential name clashes, Javascript allows default exports to be imported under any valid name. For example, the Dice module could be imported as Foo:

import Foo from './modules/dice.js';

The developer could now reference the default export as Foo,
giving the them access to everything in the default export object as: Foo.NUMBERS, Foo.min(), Foo.max(), Foo.roll().

Importing an individual data/ functionality

In some cases a module may not provide a default export, the default export may not provide the data/functionality the developer wishes to use, or default export may return lots of redundant data/functionality. For these situations, Javascript allows the developer to import individual data/functionality. To import individual data/functionality, the developer should wrap the desired exported data/functionality in curly brackets. For example, if the developer would like to import the NUMBERS and the roll() data/functionality from the Dice module:

import { NUMBERS, roll } from './modules/dice.js';

This would give the developer access to the NUMBERS and roll() data/functionality as NUMBERS and roll(), exactly the names given to them by the module they were exported from. There are times when it's not suitable to use the names given by the module the developer is importing from are not suitable. When importing from multiple modules, the chances of name clashes become increasingly likely, the given names may not be descriptive enough. For these situations, Javascript provides the as keyword. The as keyword can be used to rename imported individual data/functionality. For example, should the developer want to import the NUMBERS data as DICE_NUMBERS and the roll() functionality as rollDice:

import { NUMBERS as DICE_NUMBERS, roll as rollDice } from './modules/dice.js';

This would give the developer access to the NUMBERS and roll() data/functionality as DICE_NUMBERS and rollDice().

Importing and namespacing all individual data/functionality

In some cases, the developer may wish to import all available individual data/functionality from a module, without listing out every individual export. Not all modules will export all of that data/functionality as a default export. In these cases the developer can import all module exports under a namespace, using the * key. For example, if the developer wished to import all the Dice module data/functionality under the namespace Bar:

import * as Bar from './modules/dice.js';

This would give the developer access to the NUMBERS, min(), max(), and roll() data/functionality as Bar.DICE_NUMBERS, Bar.min(), Bar.max(), and Bar.roll().

Conclusion

Javascript modularity has changed the way developers build web applications. There are several ways to import data/functionality from a module, hopefully, this post provides an insight into when and why to use each import syntax.

If you’ve found this article useful, please follow me on Medium, Dev.to and/ or Twitter.