Re-export values from another file in JavaScript

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.

Copied!
// 👇️ 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.

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

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

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

Copied!
// 👇️ 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:

Copied!
// 👇️ 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.

Copied!
// 👇️ 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.

Copied!
// 👇️ 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"

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

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.