Re-export values from another file in JavaScript

avatar

Borislav Hadzhiev

Last updated: Mar 29, 2022

banner

Photo from Unsplash

Re-export values from another file in JavaScript #

To re-export values from another file in JavaScript, make sure to export the name exports as export {myFunction, myConstant} from './another-file.js and the default export as export {default} from './another-file.js'. The values can be imported from the file that re-exported them.

Here is an example of a file that has 2 named exports and a default export.

another-file.js
// 👇️ named export export function increaseSalary(salary) { return salary + 100; } // 👇️ named export export const department = 'accounting'; // 👇️ default export export default function multiply(a, b) { return a * b; }

Here is how you would re-export the exported members of another-file.js from a file called index.js.

index.js
export {increaseSalary, department, default} from './another-file.js';

The example above directly re-exports the 2 named exports and the default export.

This means that you can't use increaseSalary, department and the default export in the index.js file because we haven't imported them, we directly re-exported them.

If you have to use the values in the file, you would also have to import them.

index.js
// 👇️ import (only if you need to use them in index.js) import multiply, {increaseSalary, department} from './another-file.js'; // 👇️ re-export export {increaseSalary, department, default} from './another-file.js'; console.log(multiply(5, 5)); // 👉️ 25 console.log(department); // "accounting" console.log(increaseSalary(100)); // 👉️ 200

The syntax for re-exporting members of another module is:

index.js
// 👇️ re-export NAMED exports export {increaseSalary, department} from './another-file.js' // 👇️ re-export DEFAULT export export {default} from './another-file.js'

The two lines from the example above can be combined into a single line if you're re-exporting members of the same file.

If you are re-exporting members from multiple files, you would have to use a line of code for each file.
index.js
// 👇️ re-export NAMED exports export {increaseSalary, department} from './first-file.js' // 👇️ re-export default export export {default} from './second-file.js'

You could then import the re-exported members from the same module.

consumer-file.js
// 👇️ default and named imports (all from index.js) import multiply, {increaseSalary, department} from './index.js'; console.log(multiply(10, 10)); // 👉️ 100 console.log(increaseSalary(100)); // 👉️ 200 console.log(department); // 👉️ "accounting"
This is the main advantage of re-exporting values - you can re-export the members of multiple files from a single module, which would simplify your imports.

The pattern you often see is - re-export members of different files from a file called index.js. The name index.js is important because you don't have to explicitly specify the name index when importing (in some environments).

However, this pattern is implicit and sometimes frowned upon. For example, in Node.js, the default mode is explicit, which means, you have to import from'./index.js' and are not allowed to import from './.

In general it's better to be explicit and import from './utils/index.js', rather than ./utils, because this syntax is supported in more environments and is more obvious and direct.

Many of the files you use might make use of multiple utility functions that have been extracted into separated files, and you might not want to have 5 lines of imports just for utility functions or constants - this is when re-exporting from an index.js file comes in.

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.