The export default {...} construction is just a shortcut for something like this:

const funcs = {
    foo() { console.log('foo') }, 
    bar() { console.log('bar') },
    baz() { foo(); bar() }
}

export default funcs

It must become obvious now that there are no foo, bar or baz functions in the module's scope. But there is an object named funcs (though in reality it has no name) that contains these functions as its properties and which will become the module's default export.

So, to fix your code, re-write it without using the shortcut and refer to foo and bar as properties of funcs:

const funcs = {
    foo() { console.log('foo') }, 
    bar() { console.log('bar') },
    baz() { funcs.foo(); funcs.bar() } // here is the fix
}

export default funcs

Another option is to use this keyword to refer to funcs object without having to declare it explicitly, as @pawel has pointed out.

Yet another option (and the one which I generally prefer) is to declare these functions in the module scope. This allows to refer to them directly:

function foo() { console.log('foo') }
function bar() { console.log('bar') }
function baz() { foo(); bar() }

export default {foo, bar, baz}

And if you want the convenience of default export and ability to import items individually, you can also export all functions individually:

// util.js

export function foo() { console.log('foo') }
export function bar() { console.log('bar') }
export function baz() { foo(); bar() }

export default {foo, bar, baz}

// a.js, using default export

import util from './util'
util.foo()

// b.js, using named exports

import {bar} from './util'
bar()

Or, as @loganfsmyth suggested, you can do without default export and just use import * as util from './util' to get all named exports in one object.

Answer from skozin on Stack Overflow
Top answer
1 of 4
227

The export default {...} construction is just a shortcut for something like this:

const funcs = {
    foo() { console.log('foo') }, 
    bar() { console.log('bar') },
    baz() { foo(); bar() }
}

export default funcs

It must become obvious now that there are no foo, bar or baz functions in the module's scope. But there is an object named funcs (though in reality it has no name) that contains these functions as its properties and which will become the module's default export.

So, to fix your code, re-write it without using the shortcut and refer to foo and bar as properties of funcs:

const funcs = {
    foo() { console.log('foo') }, 
    bar() { console.log('bar') },
    baz() { funcs.foo(); funcs.bar() } // here is the fix
}

export default funcs

Another option is to use this keyword to refer to funcs object without having to declare it explicitly, as @pawel has pointed out.

Yet another option (and the one which I generally prefer) is to declare these functions in the module scope. This allows to refer to them directly:

function foo() { console.log('foo') }
function bar() { console.log('bar') }
function baz() { foo(); bar() }

export default {foo, bar, baz}

And if you want the convenience of default export and ability to import items individually, you can also export all functions individually:

// util.js

export function foo() { console.log('foo') }
export function bar() { console.log('bar') }
export function baz() { foo(); bar() }

export default {foo, bar, baz}

// a.js, using default export

import util from './util'
util.foo()

// b.js, using named exports

import {bar} from './util'
bar()

Or, as @loganfsmyth suggested, you can do without default export and just use import * as util from './util' to get all named exports in one object.

2 of 4
31

One alternative is to change up your module. Generally if you are exporting an object with a bunch of functions on it, it's easier to export a bunch of named functions, e.g.

export function foo() { console.log('foo') }, 
export function bar() { console.log('bar') },
export function baz() { foo(); bar() }

In this case you are export all of the functions with names, so you could do

import * as fns from './foo';

to get an object with properties for each function instead of the import you'd use for your first example:

import fns from './foo';
Discussions

Named exports of functions vs default export object with functions inside?
Named exports. It's easier to see what's exported, and the interop with CommonJS is easier. More on reddit.com
🌐 r/node
23
39
November 25, 2021
javascript - exporting multiple functions but always run default function first - Stack Overflow
Sorry for the bad description but I would like to create a "service.js" -file where I export multiple functions that retrieve data from a database. something like: ... import Person from ... More on stackoverflow.com
🌐 stackoverflow.com
javascript - How to export multiple functions Javacript? - Stack Overflow
I want to export default all functions inside export default, but every time I try to import them in another file, I get the error that the functions don't exists. Am I importing wrong? export defa... More on stackoverflow.com
🌐 stackoverflow.com
javascript - Nodejs - how group and export multiple functions in a separate file? - Stack Overflow
How can I group and export multiple functions in nodejs? I am trying to group all my util functions in utils.js: async function example1 () { return 'example 1' } async function example2 () ... More on stackoverflow.com
🌐 stackoverflow.com
People also ask

What are the different ways to export multiple functions in React?
You can export multiple functions using named exports or default exports.
🌐
dhiwise.com
dhiwise.com › post › the-ultimate-guide-to-react-export-multiple-functions
React Export Multiple Functions
What are some best practices for exporting multiple functions in React?
- Use descriptive names for your functions. - Group related functions together in the same file. - Avoid exporting too many functions from a single file. - Consider using named exports for clarity and reusability.
🌐
dhiwise.com
dhiwise.com › post › the-ultimate-guide-to-react-export-multiple-functions
React Export Multiple Functions
Why is it beneficial to export multiple functions from a single file in React?
Exporting multiple functions promotes code organization, reusability, and maintainability. It allows you to break down your code into smaller, more manageable units and share them across different components.
🌐
dhiwise.com
dhiwise.com › post › the-ultimate-guide-to-react-export-multiple-functions
React Export Multiple Functions
🌐
Softwareshorts
softwareshorts.com › how-to-export-multiple-functions-in-javascript
How to export multiple functions in JavaScript | SoftwareShorts
1// mathHelpers.js 2 3export function ... function is slightly different because even though you can have as many exports as you like, you can only have a single default export....
🌐
Atomizedobjects
atomizedobjects.com › blog › javascript › how-to-export-multiple-functions-in-javascript
How to export multiple functions in JavaScript | Atomized Objects
August 27, 2021 - To export multiple functions in JavaScript, the easiest way to do so is by using the export statement before each function you want to export. As long as you do not export functions as default then you can export as many functions as you like from a module.
🌐
DhiWise
dhiwise.com › post › the-ultimate-guide-to-react-export-multiple-functions
React Export Multiple Functions
October 22, 2024 - It's important to distinguish between the two as exporting components typically involves jsx import react and returning JSX, while exporting functions may just involve pure JavaScript logic. ... 1// Exporting a React component 2export default function CounterComponent() { 3 return <div>Counter: 0</div>; 4} 5 6// Exporting a non-component function 7export function incrementCounter(count) { 8 return count + 1; 9}
Find elsewhere
🌐
Codingem
codingem.com › home › how to export multiple functions in javascript
How to Export Multiple Functions in JavaScript - codingem.com
July 10, 2025 - To export multiple functions in JavaScript, call export by comma-separating the functions in curly braces. For example export { f1, f2, f3 }
🌐
Stack Overflow
stackoverflow.com › questions › 68574630
javascript - exporting multiple functions but always run default function first - Stack Overflow
Sorry for the bad description but I would like to create a "service.js" -file where I export multiple functions that retrieve data from a database. something like: ... import Person from '../models/Person' import dbConnect from "../lib/dbConnect"; await dbConnect() const save = async (person) => { const savedPerson = await Person.save(person) return savedPerson } const geAll = async () => { const persons = await Person.find({}) return persons } ... export default { getAll, save };
🌐
Bobby Hadz
bobbyhadz.com › blog › react-export-multiple-functions
Export multiple Functions or Components from file in React | bobbyhadz
April 7, 2024 - IMPORTANT: If you are exporting a variable (or an arrow function) as a default export, you have to declare it on 1 line and export it on the next. You can't declare and default export a variable on the same line.
🌐
John Kavanagh
johnkavanagh.co.uk › home › articles › multiple named exports in one javascript file
Multiple Named Exports in One JavaScript File | John Kavanagh
August 16, 2022 - Once upon a time, this made some sense simply for the performance gains that could be achieved by combining multiple scripts into a single file, although if you did this manually it could genuinely become untenable extremely quickly. Thankfully, we can avoid this problem altogether with modern, modular JavaScript development. ES6 allows us to break up our spaghetti‑junction JavaScript file into smaller files, and then import or export the classes (which can contain functions or data) into and out of each of the files.
🌐
CoreUI
coreui.io › answers › how-to-export-a-function-in-javascript
How to export a function in JavaScript · CoreUI
November 19, 2025 - This pattern provides clean module boundaries and explicit dependency management. Use the export keyword before function declarations for named exports or export default for single function exports. // Named exports - multiple functions per ...
🌐
Sabe
sabe.io › blog › javascript-export-multiple-functions
How to Export Multiple Functions in JavaScript - Sabe.io
June 24, 2022 - JAVASCRIPTconst add = (a, b) => a + b; const subtract = (a, b) => a - b; export { add, subtract }; This makes it accessible from the outside. Now that we've exported functions in our file, we can import them in another file.
🌐
JavaScript.info
javascript.info › tutorial › the javascript language › modules
Export and Import
In some situations the default keyword is used to reference the default export. For example, to export a function separately from its definition:
🌐
freeCodeCamp
freecodecamp.org › news › difference-between-default-and-named-exports-in-javascript
What's the Difference Between Default and Named Exports in JavaScript?
August 14, 2023 - This enables you to reuse and promote a modular and organized code structure. In JavaScript, there are two main ways to export values: default exports, used for a single value per file, and named exports, allowing multiple exports per ...
🌐
Itsourcecode
itsourcecode.com › home › how to export multiple functions in javascript
How to Export Multiple Functions in JavaScript
August 18, 2023 - ... In the importing file, use the import keyword followed by the function name to import the appropriate functions. In situations where you have multiple functions in a single file that you want to export, you can combine the export statements.
🌐
Medium
medium.com › @ibeanuhillary › default-export-vs-named-export-which-is-better-51faa54a5937
Default Export vs. Named Export: Which is Better? | by Hillary Ibeanu | Medium
May 28, 2024 - Multiple Exports: The module needs to export multiple functions, objects, or values. Clarity: You want to make the module’s exports explicit and clear. Tooling: You want to leverage better IDE support for auto-completion, refactoring, and navigation. Re-exports: You need to aggregate exports from multiple modules. Both default and named exports have their place in JavaScript ...
🌐
Go Make Things
gomakethings.com › how-to-define-a-default-export-with-vanilla-js-es-modules
How to define a default export with vanilla JS ES modules | Go Make Things
December 1, 2020 - But, we can also export it as a default export, like this. ... With this approach, we can skip the object when importing it into our script. import getTheAnswer from './modules/helpers.js'; // Get the answer var answer = getTheAnswer(); // Tell them the total alert('The answer is ' + answer); What if you have a script with multiple functions, but you want one of them to be the default, with the rest as optional exports?
🌐
GeeksforGeeks
geeksforgeeks.org › javascript › how-to-export-multiple-values-or-elements-in-a-module
How to export multiple values or elements in a Module ? - GeeksforGeeks
June 18, 2024 - Exporting multiple values from a Node.js module can be done in various ways, each with its own advantages. Using module.exports to export an object is the most common and flexible approach, but you can also use the exports object for individual exports or mix both methods.