DEV Community

loading...
Cover image for ES6 Import And Export Cheatsheet

ES6 Import And Export Cheatsheet

myogeshchavan97 profile image Yogesh Chavan Originally published at blog.yogeshchavan.dev ・6 min read

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>
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

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

import { temp1, temp2 } from './filename';
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

import { PI } from './constants';
Enter fullscreen mode Exit fullscreen mode

You can't use any other name like this:

import { PiValue } from './constants'; // This will throw an error
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

then while importing we have to use PIValue like this:

import { PIValue } from './constants';
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

import myAge from ‘./constants’; 

console.log(myAge); // 30
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

// constants.js 
const AGE = 30; 

export default AGE;
Enter fullscreen mode Exit fullscreen mode

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

//constants.js
export default {
 name: "Billy",
 age: 40
};
Enter fullscreen mode Exit fullscreen mode

and in another file use it like this:

import user from './constants';

console.log(user.name); // Billy 
console.log(user.age); // 40
Enter fullscreen mode Exit fullscreen mode

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

import * as constants from './constants';
Enter fullscreen mode Exit fullscreen mode

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
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (6)

pic
Editor guide
Collapse
akman profile image
Giannis Akmanidis

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.

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

@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.

Collapse
akman profile image
Giannis Akmanidis

probably… but i use native JavaScript modules and not bundlers so i have to use extensions

Thread Thread
myogeshchavan97 profile image
Collapse
sudarshansb143 profile image
Sudarshan Sawandkar

Awesome article.

Collapse
myogeshchavan97 profile image