Yogesh Chavan

Posted on Apr 26, 2021 • Originally published at blog.yogeshchavan.dev

ES6 Import And Export Cheatsheet

#javascript #react #codenewbie #angular

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 can’t 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 ES6

export { 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 directory
import { 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.js
export 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.js
const 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 error
export const greeting = 'hello'; // this will work
export { name: 'David' }; // This will result in error
export 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.js

const 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.js
import { isEmpty, isValidEmail } from "./utils/validations";

console.log("isEmpty:", isEmpty("abcd")); // isEmpty: string is not empty and does not contain spaces

console.log("isValidEmail:", isValidEmail("abc@11gmail.com")); // isValidEmail: email is valid

console.log("isValidEmail:", isValidEmail("ab@c@11gmail.com")); // 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 don’t need to check in what order we exported in another file. That’s 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.js
const name = 'David'; 

export default name;

To import the default export we don’t 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.js
export 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 here

import NAME, { PI, AGE } from './constants';

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

// constants.js
const 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.js
export 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.js
export 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.js
export const USERNAME = "David";
export default {
 name: "Billy",
 age: 40
};

And in another file, we use it as below:

// test.js
import * as constants from './constants';

console.log(constants.USERNAME); // David
console.log(constants.default); // { name: "Billy", age: 40 }
console.log(constants.default.age); // 40

Here's a Code Sandbox demo.

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

// constants.js
const 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 operator and 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.

Top comments (6)

Giannis Akmanidis • Apr 26 '21

Nice Post!
but i wonder if the statment :
"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." is completely true.

All the time i use imports without ext the browsers complain, so i have to use a file extension. Which usually is .mjs so it is easier to distinguish modules.

Yogesh Chavan • Apr 27 '21

@akman If you're using any module bundler like webpack which React.js uses then you don't need to include the .js extension as it's optional. If want to use Es6 Import-export syntax inside Node.js then you may need to add .mjs extension as by default Node.js supports commonJS syntax and not ES Module syntax.