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.
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.
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';
javascript - exporting multiple functions but always run default function first - Stack Overflow
Named exports of functions vs default export object with functions inside?
javascript - How to export multiple functions Javacript? - Stack Overflow
javascript - Nodejs - how group and export multiple functions in a separate file? - Stack Overflow
What are the different ways to export multiple functions in React?
What are some best practices for exporting multiple functions in React?
Why is it beneficial to export multiple functions from a single file in React?
Videos
What syntax is usually preferred?
export const a = () => {}
export const b = () => {}
export const c = () => {}or
const a = () => {}
const b = () => {}
const c = () => {}
export default { a, b, c }- Don't put them inside another function
- Use the
exportkeyword
Such:
export const aFunction = () => {};
export const anOtherFunction = () => {};
const someDefaultExport = () => {};
export default someDefaultExport;
Then you can import them:
import theDefault, { aFunction, anOtherFunction } from "../myFile";
If you want to export multiple functions AS DEFAULT you can do it by exporting one object whose properties are functions.
export default {
function1: () => {},
function2: () => {},
function3: () => {}
}
Now in another file you can import them and use as bellow:
import all from '../myFile.js';
all.function1();
all.function2();
This would be my solution for your exporting problem! And don't mix es5 exports with es6 imports, that can get very weird - sometimes!
export const example1 = async () => {
return 'example 1'
}
export const example2 = async () => {
return 'example 2'
}
// other file
import { example1, example2 } from '../../example'
return example1()
Nevertheless if you have to mix them, just let me know! We can find a solution for this aswell!
More about exporting modules and what can go wrong!
MDN Exports and the a short story about the state of javascript modules
Below I have shared a way to declare the exporting functions in 2 different ways. Hope it helps understand the different ways in which it could be solved.
"use strict";
// utils.js
const ex1 = function() {
console.log('ex1');
};
function ex2(context) {
console.log('ex2');
};
module.exports = { example1: ex1, example2: ex2 };
You could invoke them in another (external) JS file (ex: app.js) as follows:
// app.js
const utils = require('./utils');
utils.example1(); // logs 'ex1'
utils.example2(); // logs 'ex2'