ES6 Import And Export Cheatsheet

Before ES6 came into play, we used multiple script tags in a single HTML file to import different JavaScript files like this:

<script type="text/javascript" src="home.js"></script><script type="text/javascript" src="profile.js"></script><script type="text/javascript" src="user.js"></script>

So, if we had a variable with the same name in different JavaScript files, it would create a naming conflict and the value you were expecting would not be the actual value you got.

ES6 has fixed this issue with the concept of modules.

Every JavaScript file we write in ES6 is known as a module. The variables and functions we declare in each file are not available to other files until we specifically export them from that file and import them into another file.

So the functions and variables defined in the file are private to each file and cant be accessed outside the file until we export them.

There are two types of exports:

• Named Exports: There can be multiple named exports in a single file
• Default Exports: There can be only one default export in a single file

Named Exports in JavaScript

To export a single value as a named export, we export it like this:

export const temp = "This is some dummy text";

If we have multiple things to export, we can write an export statement on a separate line instead of in front of a variable declaration. We specify the things to export in curly brackets.

const temp1 = "This is some dummy text1";const temp2 = "This is some dummy text2";export { temp1, temp2 };

Note that the export syntax is not an object literal syntax. So in ES6, to export something we can't use key-value pairs like this:

 // This is invalid syntax of export in ES6export { key1: value1, key2: value2 }

To import the things we exported as a named export, we use the following syntax:

import { temp1, temp2 } from './filename';

Note that while importing something from the file, we don't need to add the .js extension to the filename as it's considered by default.

// import from functions.js file from current directory import { temp1, temp2 } from './functions';// import from functions.js file from parent of current directoryimport { temp1 } from '../functions';

Here's a Code Sandbox demo.

One thing to note is that the name used while exporting has to match the name we use while importing.

So if you are exporting as:

// constants.jsexport const PI = 3.14159;

then while importing you have to use the same name used while exporting:

import { PI } from './constants';

You can't use any other name like this:

import { PiValue } from './constants'; // This will throw an error

But if you already have the variable with the same name as the exported variable, you can use the renaming syntax while importing like this:

import { PI as PIValue } from './constants';

Here we have renamed PI to PIValue and so we can't use the PI variable name now. Instead, we have to use the PIValue variable to get the exported value of PI.

We can also use the renaming syntax at the time of exporting:

// constants.jsconst PI = 3.14159; export { PI as PIValue };

then while importing we have to use PIValue like this:

import { PIValue } from './constants';

To export something as a named export, we have to declare it first.

export 'hello'; // this will result in errorexport const greeting = 'hello'; // this will workexport { name: 'David' }; // This will result in errorexport const object = { name: 'David' }; // This will work

The order in which we import the multiple named exports is not important.

Take a look at the below validations.js file:

// utils/validations.jsconst isValidEmail = function(email) {  if (/^[^@ ]+@[^@ ]+\.[^@ \.]{2,}$/.test(email)) {    return "email is valid";  } else {    return "email is invalid";  }};const isValidPhone = function(phone) {  if (/^[\\(]\d{3}[\\)]\s\d{3}-\d{4}$/.test(phone)) {    return "phone number is valid";  } else {    return "phone number is invalid";  }};function isEmpty(value) {   if (/^\s*$/.test(value)) {    return "string is empty or contains only spaces";  } else {    return "string is not empty and does not contain spaces";  } }export { isValidEmail, isValidPhone, isEmpty };

and in index.js we use these functions as shown below:

// index.jsimport { isEmpty, isValidEmail } from "./utils/validations";console.log("isEmpty:", isEmpty("abcd")); // isEmpty: string is not empty and does not contain spacesconsole.log("isValidEmail:", isValidEmail("[email protected]")); // isValidEmail: email is validconsole.log("isValidEmail:", isValidEmail("ab@[email protected]")); // isValidEmail: email is invalid

Here's a Code Sandbox demo.

As you can see, we can import only the required exported things and in any order, so we dont need to check in what order we exported in another file. Thats the beauty of named exports.

Default Exports in JavaScript

As I said earlier, there can be at most one default export in a single file.

You can, however, combine multiple named exports and one default export in a single file.

To declare a default export we add the default keyword in front of the export keyword like this:

//constants.jsconst name = 'David'; export default name;

To import the default export we dont add the curly brackets as we did in the named export like this:

import name from './constants';

If we have multiple named exports and one default export like this:

// constants.jsexport const PI = 3.14159; export const AGE = 30;const NAME = "David";export default NAME;

then to import everything on a single line we need to use the default exported variable before the curly bracket only.

// NAME is default export and PI and AGE are named exports hereimport NAME, { PI, AGE } from './constants';

One specialty of default export is that we can change the name of the exported variable while importing:

// constants.jsconst AGE = 30;export default AGE;

And in another file, we can use another name while importing

import myAge from ./constants; console.log(myAge); // 30

Here, we have changed the name of the default exported variable from AGE to myAge.

This works because there can be only one default export so you can name it whatever you want.

Another thing to note about default export is that the export default keyword cannot come before variable declaration like this:

// constants.jsexport default const AGE = 30; // This is an error and will not work

so we have to use the export default keyword on a separate line like this:

// constants.js const AGE = 30; export default AGE;

We can, however, export default without declaring the variable like this:

//constants.jsexport default { name: "Billy", age: 40};

and in another file use it like this:

import user from './constants';console.log(user.name); // Billy console.log(user.age); // 40

There is another way of importing all the variables exported in a file using the following syntax:

import * as constants from './constants';

Here, we are importing all the named and default exports we have in constants.js and store in the constants variable. So, constants will become an object now.

// constants.jsexport const USERNAME = "David";export default { name: "Billy", age: 40};

And in another file, we use it as below:

// test.jsimport * as constants from './constants';console.log(constants.USERNAME); // Davidconsole.log(constants.default); // { name: "Billy", age: 40 }console.log(constants.default.age); // 40

Here's a Code Sandbox demo.

If you dont want to export on separate lines for default and named exports, you can combine it as shown below:

// constants.jsconst PI = 3.14159; const AGE = 30;const USERNAME = "David";const USER = { name: "Billy", age: 40 };export { PI, AGE, USERNAME, USER as default };

Here, we are exporting USER as the default export and others as named exports.

In another file, you can use it like this:

import USER, { PI, AGE, USERNAME } from "./constants";

Here's a Code Sandbox demo.

Conclusion

• In ES6, data declared in one file is not accessible to another file until it is exported from that file and imported into another file.
• If we have a single thing in a file to export like class declaration, we use default export otherwise we use named export. We can also combine default and named exports in a single file.

Thanks for reading

Starting with ES6, there are many useful additions to JavaScript like

• ES6 Destructuring
• Import and Export Syntax
• Arrow functions
• Promises
• Async/await
• Optional chaining operatorand a lot more.

You can learn everything about all the ES6+ features in detail in my Mastering Modern JavaScript book.

Check out free preview contents of the book here.

Also, you can check out my free Introduction to React Router course to learn React Router from scratch.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.