How to Import All Named Exports from a JavaScript File

When import and export statements were introduced into JavaScript as part of the introduction of modules with ES6 in 2015, the way we handle JavaScript development changed in pretty massive ways.

The main bonus, at least for developers was that it allowed for much cleaner and more easily maintainable code to be written because you could split your code into separate files and functions to prevent spaghetti code from forming in one massive, central JavaScript file.

When you're working with export and import, though, there will often be times when you'll want to export multiple functions or variables from a single file ‑ and import more than one at a time into another file. So how do we do that?

Well, there are a couple of ways:

Creating a Module Object

The shortest import statement that you can use to bring in more than one export uses this wildcard syntax:

import * as band from 'band-functions.js';

This creates a module object called band, with each export being accessible as members of that object. You'll be able to access each of the exports like this:

const members = band.getMembers(); console.log(members);  const genre = band.getGenre(); console.log(genre);  const latestAlbum = band.getAlbum('latest'); console.log(latestAlbum); 

This can be handy if you've got a lot of exports that you need to bring in. It's also good for keeping things namespaced, which can help with maintainability and clarity further down the line ‑ I'm sure we all know what it's like to come back to a complex codebase after a week off work and feel as though you're looking at somebody else's work!

Individual Named Imports

The other way to do this, which is much more commonly found in the wild, is to explicitly name your imports via ImportClause, a pattern very similar to destructuring, which you can do in one statement. Check it out:

import { getMembers, getGenre, getAlbum } from 'band-functions.js'; 

This is helpful for getting a clear idea of what you're actually importing at a glance at the very top of the file you're working in.

These imports are not set up as a module object, so you don't need to access them as members ‑ you just access them straight, like this:

const members = getMembers(); console.log(members);  const genre = getGenre(); console.log(genre); 

As a pattern, this is my preferred method although it can add a little additional confusion as it removes the 'namespaced' aspect of those imported functions: when looking at the code it isn't always immediately obvious where the function comes from.

There's also an extra complication in that you can't have two imports from different files, with the same name.

Fortunately, you could always rename/destructure once imported.

A Note About Default Exports

If the module that you're trying to import from has a default export, you'll have to bear that in mind with both of these methods. With the first method (the module object), you'll be able to access this default export by using the default member, like so:

const bandName = band.default();console.log(bandName);

This is what the default export will be called, regardless of what the function may be called in the original file. For instance, with the above statement, your export might look like this:

export default function getBandName(id) {  return name(id);}

Alternatively, if you're working with explicitly named imports, you'll need to name your default import outside of the brackets ‑ check out this example, using the same export function as above:

import getBandName, { getMembers, getGenre, getAlbum } from 'band-functions.js';  const bandName = getBandName(); console.log(bandName); 

The Wrap‑Up

Ultimately, JavaScript modules are great for keeping your code concise, clear, and clean. If you're not already using them, you should absolutely start; they can seriously help in cutting down the time you spend untangling code!

If you're looking for a how‑to guide on this functionality from the other side, check out How to Handle Multiple Named Exports in One JavaScript File.