Vanilla JS — ES6

Understanding ES6 Modules (Import / Export Syntax) in JavaScript

Import & export of ES6 modules in JavaScript explained. Using the browser, compiler and even Node.js

Louis Petrik

Published in

codeburst

4 min readMay 26, 2020

JavaScript ES6 Modules — Source: Pixabay

What Are ES6 Modules?

From working with frameworks like React.js, Angular or Vue this syntax should already be known:

With this syntax, we can exchange single parts like functions, arrays, objects and more of our source code in single files, by providing them with export and including them with import.

Basically the import and export syntax is used everywhere where we write JavaScript and then transcompile and bundle it to “old-school” javascript. But the time when it can only be used in conjunction with compilers like Babel is over.

Meanwhile Node.js also supports the so-called ES6 modules, and in the browser we can use them if we want to. On both use cases, we will have a look at the end of this article.

Structure of This Article

default import and export
named import and export
named import and export with renaming
ES6 modules in Node.js
ES6 modules in the Browser
A cheatsheet for you

Let’s Get Into This

Let’s start with exporting a simple value, like a string, number or even an array, and importing it withing our index.js main file.

For our examples, will always will see the output of the index.js, to which we import something from the second.js.

The Default Export / Import

The special thing about this kind of exporting and importing, is that the we provide no clear name, so it is up to us, as

second.js:

export default 'some string'

or for an existing variable:

export const name = 'Max'
export default name

index.js:

import someValue from './second.js'console.log(someValue) // 'some string'

That’s easy, hm? This is how we simply export some value, and as I said, you can also export an object, array or even a function, like it is shown below:

export default function greet() {
  return 'hi user!'
}

or in case you prefer arrow functions:

const greet = () => 'hi user!'
export default greet

index.js (in both cases)

import someFunction from './second.js'
console.log(someFunction())  // 'hi user!'

But keep in mind, there can be only a single default export per file.

The Named Export / Import

second.js:

const greet = () => {
  return 'hi user!'
}const name = 'Max'export { greet, name }

or, if you want to use multiple export statements:

const greet = () => {
  return 'hi user!'
}export { greet }export const name = 'Max'

index.js:

import { greet, name } from './second.js'console.log(name)     // 'Max'
console.log(greet())  // 'hi user!'

The (Renamed) Named Export / Import

import { greet as greetFunction } from './second.js'console.log(greetFunction())

or when it comes to exporting something

const greetingFunction = () => {
  return 'hi user!'
}export { greetingFunction as greet }

Quickly shown: ES6 modules in Node.js

Since version 13, we can also use this syntax for Node.js, only thing we need to do, to be able, adding “type”: “module” on the top level in our package.json, like this:

{ 
  "name": "es6-in-node", 
  "version": "1.0.0", 
  "main": "index.js", 
  "license": "MIT", 
  "type": "module", 
}

After you have done this, you should be able to import and export JavaScript as shown in our examples before.

How to use ES6 modules in the browser

This will be the structure of our app. Again we import something from the second.js into the index.js. This is our file structure:

├── index.html
├── index.js
└── second.js

In our second.js we export with an named export, the variable name, as you should see.

export const name = 'Max'

In the index.js, we then can import from this file, using the relative URL, so via the path from our index.js, to our second.js:

import { name } from './second.js'
console.log(name)

So far is everything just like before, but now there is one important point. The file, which imports from other files, must be referenced with the type=”module” attribute in its script tag. Without that, our import would not work:

index.html:

<body>
  <script src="index.js" type="module"></script>
</body>

After you have done this, you should be able to import and export JavaScript normally.

But Should You Use This in Syntax in the Browser?

According to caniuse.com, about 90% of all internet users support this feature. So if you want to take no risk, then better do not use it.

At the End, a Cheatsheet for You

Feel free too download it and to use it for whatever you want

javascript import export es6 modules cheat sheet — import export syntax cheat sheet

Unlock unlimited access to quality content with a Medium membership while supporting me!*

*Affiliate links. If you use these links to purchase something, I will earn a commission, but there is no additional cost for you. Thank you very much!