Import all Exports from a File in JavaScript

avatar

Borislav Hadzhiev

Last updated: Mar 28, 2022

banner

Check out my new book

Import all Exports from a File in JavaScript #

To import all exports from a file in JavaScript:

  1. Export all members you intend to import from file A.
  2. Import all the exports in file B as import * as myObj from './another-file'.
  3. Use the imported members as myObj.myFunction() in file B.

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

another-file.js
// 👇️ all named exports export const getEmployee = () => { return {id: 3, salary: 300}; }; export function getDeveloper() { return {name: 'James'}; } export const department = 'front-end';

Here is how we would import all of the exports into a file called index.js.

index.js
import * as company from './another-file.js'; const emp = company.getEmployee(); console.log(emp); // 👉️ {id: 3, salary: 300} const dev = company.getDeveloper(); console.log(dev); // 👉️ {name: 'James'} console.log(company.department); // 👉️ "front-end"

This pattern is called creating a module object and is used when importing a large number of things.

The syntax grabs all of the exports from another-file.js and makes them available as members of an object called company inside of the index.js file.

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

For example, if another-file.js was located one directory up, you'd have to import as import * as company from '../another-file.js'.

The import/export syntax is called JavaScript modules.

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

The example above uses named exports.

You could have also used named imports in index.js and explicitly stated the names of the imports.

index.js
// 👇️ named imports import {getEmployee, getDeveloper, department} from './another-file.js'; const emp = getEmployee(); console.log(emp); // 👉️ {id: 3, salary: 300} const dev = getDeveloper(); console.log(dev); // 👉️ {name: 'James'} console.log(department); // 👉️ "front-end"

The code snipped above achieves the same goal as importing all exports from the file via import * as company from './another-file.js'.

This approach is more widely used as it is more concise and direct.

The module you are importing from might also contain a default export.

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 the module you are importing from has a default export, you would import it by removing the curly braces around its name or accessing it on the namespace as myObj.default.

another-file.js
// 👇️ default export export default function sum(a, b) { return a + b; }

And here is how you would import and use the default export with the module object pattern.

index.js
import * as myObj from './another-file.js'; console.log(myObj.default(50, 50)); // 👉️ 100

Notice that the default export is a function named sum, but we access it as .default with this pattern.

A more intuitive approach is to import the things you need directly.

another-file.js
// 👇️ all named exports export const getEmployee = () => { return {id: 3, salary: 300}; }; export function getDeveloper() { return {name: 'James'}; } export const department = 'front-end'; // 👇️ default export export default function sum(a, b) { return a + b; }

And here is how you would import the members you need.

index.js
import sum, {getEmployee, getDeveloper, department} from './another-file.js'; console.log(sum(50, 50)); // 👉️ 100 console.log(getEmployee()); // 👉️ {id: 3, salary: 300} console.log(getDeveloper()); // 👉️ {name: 'James'} console.log(department); // 👉️ 'front-end

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.