Exports and Imports in JavaScript

Back to: ReactJS Tutorials

Exports and Imports in JavaScript

In this article, I am going to discuss Exports and Imports in JavaScript with Examples. Please read our previous article where we discussed JavaScript Arrow Functions.

Exports and Imports in JavaScript:

Another feature that next-generation JavaScript offers is about writing modular code. That means we can split up JavaScript code over multiple files. We just have to import them in the correct order in our HTML files. And the idea behind export and import statements and so-called modules is that inside a JavaScript file, we can import content from another file so that the JavaScript files themselves know their dependencies. For a better understanding please have a look at the below code.

Suppose, we have one file called person.js, and inside that file, we have the constant person which is stored as a JavaScript object and then the interesting part comes. We export this, the default keyword that is a special keyword marking this as the default export of this file and we can then import this somewhere else.

We can have several files where we export multiple things. Here a constant named clean hold a function at the end and baseData holds a number.

We might need to import from person.js and utility.js, so app.js requires import statements. And here are a couple of different import syntaxes you will see in our upcoming articles.

As you see, person.js uses the default keyword. The default keyword simply means if we just import something from that file it will always be our default export. So, in this case, the person constant is the default export. Therefore, in app.js, in import person from person.js, we can name person or whatever we want, which is why we printed it twice here, person or prs does not matter. It always refers to the thing you marked as the default with the default keyword.

For utility.js, it’s a bit different. There, we import from two different constants, and therefore the import syntax uses the curly braces to explicitly target specific things from that file. These are so-called named exports because we import the stuff by its name. We import the clean constant by its name and we import baseData by its name. Because we did not mark anything as the default. So, for JavaScript to know what exactly we’re pointing to, we need to give it the exact name and the name goes between curly braces.

By the way, you could also write these two statements as one import statement as import {baseData, clean} from ‘./utility.js’.

So, these are imports and exports in JavaScript. We will write all of this in our JavaScript files and will heavily use this in upcoming articles on ReactJS. Now as with all these next-generation JavaScript features, it will not run like this in all browsers. Not even the most modern browsers support all the features we will use in our project. Therefore, in the next section, we will also show you how to quickly set up a project which in the end, compiles all these next-generation JavaScript features to current-generation JavaScript features. So that we as a developer can use the next-generation JavaScript without shipping code that runs nowhere.

So back to the imports and exports. You might also see some variations because we can also write this differently.

When we have a default export, you already saw that person (used in import statements, not the constant) is a name and you can choose totally on your own. It does not matter here if you use person or prs.

If you have a named export, you have to use the exact name defined in the file with the export keyword. Still, what we can do? We can assign an alias which you then again can freely choose in the file you are importing with the as keyword or if you have multiple named exports in a file, you can import everything with the ‘*’ special character and then assign an alias i.e., bundled. In this case, bundled would be a JavaScript object which stores all the constants and whatever you export in the other file as properties. So that you simply have bundled.baseData, bundled.clean to access the export of things. You will see these things in our React.js course. The most common usage import {person} from ‘./utility.js’.

In the next article, I am going to discuss Classes in JavaScript with Examples. Here, in this article, I try to explain Exports and Imports in JavaScript with Examples. I hope you enjoy this Exports and Imports in JavaScript article.