308A.5 - Modules and Imports

Learning Objectives

By the end of this lesson, learners should be able to:

Use the import and export keywords to organize code into modules.

Modules and Imports

As JavaScript programs grow in size and complexity, it makes sense to split content into separate files for organization. Nobody wants to deal with a single JavaScript file with 10,000 lines of code. Code that is split into files that contain specific sets of functionality are called "modules."

Modern implementations provide us with two keywords to enable this functionality: import and export.

The export keyword can be used in front of any variable or function declaration (and classes) to make that item available to external files, but it can only export a top-level item. You cannot, for example, export a variable from inside of a function.

export const name = "Module File Value";

export function getValue(arg) {
  // do something with arg
}

For a module with many possible exports, you can also consolidate the export statement into a single line of code to make it immediately apparent what the module is exporting:

export { name, getValue, findAnswer, makeCake, eatItToo };

There are many ways to import these items into another file with the import statement, but the simplest is:

import { name, getValue, findAnswer, makeCake, eatItToo } from './modules/myModule.js';

You can include or forgo any of these imports, depending on what you want to use. You can also rename imports using the as keyword:

import { getValue as gVal, makeCake } from './modules/myModule.js';

const x = gVal(a);

This becomes particularly useful when you have modules with the same names for items. Assume we have three modules that all have a getValue function that behaves differently depending on the module's purpose:

import { getValue as getParsedArgData } from './modules/myModule.js';
import { getValue as getExternalStat } from './modules/yourModule.js';
import { getValue as getRichQuick } from './modules/theirModule.js';

This can get a bit cumbersome if many items within many modules are identical. One solution to this issue is creating module objects that we can then use to get their properties and call their methods. To do so, we use the wildcard * to indicate we would like to import everything from the module, and assign that as a specific object:

import * as MyModule from './modules/myModule.js';
import * as YourModule from './modules/yourModule.js';
import * as TheirModule from './modules/theirModule.js';

const parsedArgData = MyModule.getValue(a);
const someExternalStat = YourModule.getValue();
const lotsOfMoney = TheirModule.getValue();

There is also the option of providing a default export within modules, which provides a quick way to give access to a single item within the module. There can only be one default import per module:

// Within our module:
export default function() {
  // do some magic
}


// Within a file using the module:
import magic from './modules/magicModule.js'

magic();

Notice that we can name this default export whatever we want within our import statement, and it does not need to be named within the module file.

Becoming familiar with modules and imports will be necessary throughout your development journey, especially as you are introduced to external packages and libraries. To do further research on these concepts, begin with the MDN documentation on Modules.