ES6 Modules: Must you explicitly define variables before returning them?

Question

Before I gave my JavaScript file type="module" , I could define my variables in the same statement that I used to return them.

Example:

function formatNameForFile(name) { return formattedName = name.toLowerCase().replace(/ /g, '-'); }

However, once I did add type="module" to my JavaScript file, I received the following reference error:

Uncaught ReferenceError: formattedName is not defined

I could eliminate these errors by explicitly defining my variables prior to returning them, like so:

function formatNameForFile(name) { const formattedName = name.toLowerCase().replace(/ /g, '-'); return formattedName; }

Why is this? Aren't these variables still accessible via the initial return statement so long as they are bound (using const, var, or let) within it?

In the case above you should just use return name.toLowerCase().replace(/ /g, '-'); — Tamas Szoke
– Tamas Szoke, Commented Sep 24, 2020 at 21:49
Are you trying to define an outer/global variable at the same time? If so, you should explicitly declare it at the scope where it is intended. Then your code will work, though I don't think that's a great approach. — user12407908
– user12407908, Commented Sep 24, 2020 at 21:52
@slappy yes, good point. I do not actually need to declare any variables. I've switched to just using return statements, as was mentioned above by iAmOren and Tamas Szoke . Thanks for the help, all — mikekoscinski
– mikekoscinski, Commented Sep 25, 2020 at 14:21

CertainPerformance · Accepted Answer · 2020-09-24 21:48:59Z

ES6 modules are always strict.

The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.

In strict mode, when you attempt to assign to a variable which hasn't been defined yet, an error is thrown:

'use strict'; something = 'foo';

This is what's happening in your module. Since the variable name has not been defined anywhere inside the function or in any of its parent scopes, an error gets thrown.

Aren't these variables still accessible via the initial return statement so long as they are bound (using const, var, or let) within it?

Sure, but you can't refer to or assign to a variable which has not been initialized yet.

But there's no need to create a variable that you're immediately going to return. If you wanted, you could do

const formatNameForFile = name => name.toLowerCase().replace(/ /g, '-');

Ah ok, got it. Thank you, this is a great explanation. This is just one example, but all of the functions this pertains to are reused within other functions, so I do need to maintain references to the variables. This is very helpful, though - thank you
Sorry, I now see what you mean about not needing to declare variables. Using a return statement by itself does work fine. Thanks again

Collectives™ on Stack Overflow

ES6 Modules: Must you explicitly define variables before returning them?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related