How to export Constants in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Check out my new book

Export Constants in JavaScript #

Use named exports to export constants in JavaScript, e.g. export const A = 'a' and export const B = 'b'. The exported constants can be imported by using a named import as import {A, B} from './another-file.js'. You can have as many named exports as necessary in a file.

Here is an example of exporting constants from a file called another-file.js.

another-file.js
// 👇️ named export export const DB_PORT = 1234; // 👇️ named export export const URL = 'example.com';

Using export on the same line as the variable's definition is the same as exporting the constants as an object after they have been declared.

another-file.js
const DB_PORT = 1234; const URL = 'example.com'; // 👇️ named exports export {DB_PORT, URL};

Here is how we would import the constants in a file called index.js.

index.js
// 👇️ named imports import {DB_PORT, URL} from './another-file.js'; console.log(DB_PORT); // 👉️ 1234 console.log(URL); // 👉️ "example.com"

Make sure to correct the path that points to the another-file.js module if you have to. The example assumes that another-file.js and index.js are located in the same directory.

For example, if you were importing from one directory up, you would do import {DB_PORT, URL} from '../another-file.js'.

We wrapped the names of the constants in curly braces when importing them - this is called a named import.

The import/export syntax is called ES6 Modules in JavaScript.

In order to be able to import a variable from a different file, it has to be exported using a named or default export.

The example above uses named exports and named imports.

The main difference between named and default exports and imports is - you can have multiple named exports per file, but you can only have a single default export.

If you try to use multiple default exports in a single file, you would get an error.

another-file.js
const DB_PORT = 1234; const URL = 'example.com'; export default DB_PORT // ⛔️ Error: Can't have 2 default exports in same file export default URL

IMPORTANT: If you are exporting a variable (or an arrow function) as a default export, you have to declare it on 1 line and export it on the next. You can't declare and default export a variable on the same line.

Having said that, you can use 1 default export and as many named exports as necessary in a single file.

Let's look at an example that exports constants using both default and named exports.

another-file.js
const DB_PORT = 1234; // 👇️ default export export default DB_PORT; // 👇️ named export export const URL = 'example.com';

And here is how you would import the two variables.

index.js
// 👇️ default and named imports import DB_PORT, {URL} from './another-file.js'; console.log(DB_PORT); // 👉️ 1234 console.log(URL); // 👉️ "example.com"

Notice that we didn't wrap the default import in curly braces.

We used a default import to import the DB_PORT constant and a named import to import the URL constant.

You can only have a single default export per file, but you can have as many named exports as necessary.

In my experience, most real world codebases exclusively use named exports and imports because they make it easier to leverage your IDE for autocompletion and auto-imports.

You also don't have to think about which members are exported with a default or named export.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.