ES6 export default with multiple functions referring to each other

by

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.

More Related Contents:

  1. How can I write a function that will format a camel cased string to have spaces?
  2. Arrow function without curly braces
  3. ES6 class variable alternatives
  4. What do square brackets around a property name in an object literal mean?
  5. How do I destructure all properties into the current scope/closure in ES2015?
  6. How can I mock an ES6 module import using Jest?
  7. Spread Syntax vs Rest Parameter in ES2015 / ES6
  8. ES6 template literals vs. concatenated strings
  9. ES6 exporting/importing in index file
  10. What is the difference between ‘let’ and ‘const’ ECMAScript 2015 (ES6)?
  11. Is there a mechanism to loop x times in ES6 (ECMAScript 6) without mutable variables?
  12. Why are Objects not Iterable in JavaScript?
  13. Importing modules using ES6 syntax and dynamic path [duplicate]
  14. Is there any one-line analogy in ES6 for ES5 `module.exports = require(‘./inner.js’)`?
  15. How to destructure an object to an already defined variable? [duplicate]
  16. Convert ES6 Iterable to Array
  17. What is lexical ‘this’? [duplicate]
  18. ES6 `export * from import`?
  19. Inlining ECMAScript Modules in HTML
  20. this.setState is not a function [duplicate]
  21. Get parent class name from child with ES6?
  22. JavaScript Extending Class
  23. How can I export all functions from a file in JS?
  24. How to import part of object in ES6 modules
  25. Web Workers – How To Import Modules
  26. Template literals with nested backticks(`) in ES6
  27. Is it possible to reset an ECMAScript 6 generator to its initial state?
  28. How to omit specific properties from an object in JavaScript
  29. Why does JavaScript Promise then handler run after other code?
  30. import * as React from ‘react’; vs import React from ‘react’;

Leave a Comment