ES6 Import & Export – A beginners guide

Importing and exporting modules is a big part of Javascript. Before ES6, importing modules could be included into a script by using the  require() function.  ES6 introduced the import and export keywords which brings Javascript more in line with programming languages like Java and Ruby.

Basic Import

To import a module into a script, you can use the import keyword. Anyone who has looked at a React tutorial will recognise the following syntax:

import React from 'react';

This will import the default package exported by the react npm package.

Basic Export

Similar to module.exports, you can export any class

Relationship.js
class Relationship {
constructor(from, to, type, direction) {
this.from = from;
this.to = to;
this.type = type;
this.direction = direction;
}
}

export default Relationship;

Export or Export Default?

You may have noticed that I used the export default statement when exporting my module. This is something that tripped me up a few times in the early stages.
When using export default, you are telling the Javascript engine that the function or variable should be included as default.

Like in the example above, we can import in the Relationship class with the following code.

import Relationship from './Relationship';

At this point, it is worth pointing out that a default module can be imported to any variable name. For example, if we wanted to import the class as SomeRelationshipClass we could also do so.
import SomeRelationshipClass from './Relationship';

Exporting without the default keyword means we will have to use braces to import the file. Say we want to export a constant for an outgoing relationship, we could add another export statement to the file.

Relationship.js
export default class Relationship {
// ...
}

export const DIRECTION_IN = 'DIRECTION_IN';
export const DIRECTION_OUT = 'DIRECTION_OUT';


Note: I have changed the first line of the file to export the Relationship class directly.

Now, we can import both the Relationship at the same time by encapsulating the DIRECTION_OUT variable in braces.

import Relationship, {DIRECTION_OUT} from './Relationship'

We can also use the as keyword to rename the variable.

import Relationship, {DIRECTION_OUT as RELATIONSHIP_DIRECTION_OUT} from './Relationship'

Object destructuring

Destructuring is also something you see a lot in React examples and it can look confusing. You may have seen something similar to the following:

import ReactNative from 'react-native';
const {
AppRegistry,
NavigatorIOS,
StyleSheet,
} = ReactNative;

In short, it is a quick way of extracting variables from a class. The equivalent would be:

const AppRegistry = ReactNative.AppRegistry;
const NavigatorIOS = ReactNative.NavigatorIOS;
const StyleSheet = ReactNative.StyleSheet;

Destructuring is a big topic, you can read more on Destructuring & Assignment on MDN.

Conclusion

Imports and Exports in ES6 are a lot clearer to deal with than the previous module.exports. Once you’ve mastered the export/export default subtleties you should have no problems.