Import all Exports from a File in JavaScript

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.

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

Copied!
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.

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.

The example above uses named exports.

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

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

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.

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

Copied!
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.

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

Copied!
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.