Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ES6 export default with multiple functions referring to each other

in es6 there you can define a module of functions like this

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

the above seems to be valid code, but if I call baz() it throws an error:

ReferenceError: foo is not defined

How do you call foo from another function? in this case baz

Edit

Here's the code that actually doesn't work. I have simplified the code so it's only the core as needed

const tokenManager =  {   revokeToken(headers) {      ...    },   expireToken(headers) {     ...   },   verifyToken(req, res, next) {     jwt.verify(... => {       if (err) {         expireToken(req.headers)       }     })   } }  export default tokenManager  

and the error is

expireToken(req.headers);         ^ ReferenceError: expireToken is not defined 

Edit 2

I just tried adding tokenManager before expireToken and it finally works

like image 328
chrs Avatar asked Oct 16 '15 20:10

chrs


People also ask

Can you export default multiple functions?

You can export as many functions as needed as long as you remember that there can be only one default export. The default export in JavaScript is used to export a single/fallback value from a module. With a default export, you do not need to specify a name for the exported function. The filename is used by default.

How do you export default multiple functions React?

Use named exports to export multiple functions in React, e.g. export function A() {} and export function B() {} . The exported functions can be imported by using a named import as import {A, B} from './another-file' . You can have as many named exports as necessary in a single file.

Can you have multiple default exports JS?

Types of Exports in Js. There are two different types of export, named and default. You can have multiple named exports per module but only one default export.

Can you have multiple export default React?

The main difference between named and default exports and imports is - you can have multiple named exports per file, but you can only have a single default export. If you try to use multiple default exports in a single file, you would get an error. Copied!


1 Answers

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.

like image 149
skozin Avatar answered Sep 30 '22 12:09

skozin