Differences between creating a new class to using export const

Question

Setup:

BabelJS (es2015, react, stage-1)
Webpack
React / redux

New to CommonJS and ES6. I know the difference between an object instance and a static container of methods but I am not sure how they behave when separated to modules. So I wonder what are the differences between returning an instance (is this pattern valid at all?):

// StateParser.js

class StateParser {
    constructor() {
     }

     method1() {
        ...
     }

}

export default new StateParser()

and exporting const methods:

// StateParser.js

let state = {
}

export const method1 = () => { ... }

Method A: Would there be a new instance every time I import?
Method B: Is one of the benefits the ability to use object destructuring:
```
import { method1 } from '../utils/StateParser.js';
```
and then use method1 as if it existed locally?
Method A: Is one of the benefits the ability to initialize state in the constructor?

So basically I am not sure when to use which for my utility classes and would appreciate your input.

score 32 · Accepted Answer · edited May 23 '17 at 12:17

32

Would there be a new instance every time I import A?

No, modules are only evaluated once.

Is one of the benefits of B the ability to use object destructuring and then use method1 as if it existed locally?

Yes, though it's not called "destructuring". They're named imports (or named exports of the module), and they don't nest and use a different syntax for aliasing.

Is one of the benefits of A the ability to initialize state in the constructor?

No. You can initialise module state just directly in the module scope as well, you don't need a constructor function for that.

But yes, if you have state in the instances, it's a good idea to use a class which you can instantiate multiple times. For that, you need to export the class itself, not an instance, of course.

Is the export default new … pattern valid at all?

No, it's an antipattern for the reasons outlined above. Given the class is used nowhere else, it's quite similar to the anonymous class antipattern. And exporting multiple named exports is much better than default-exporting objects anyway.

edited May 23 '17 at 12:17

Community

1
1

answered Aug 22 '16 at 12:44

Bergi

630,263
148
957
1,375

Doesn't this work quite differently than anonymous classes in that, as you pointed out, `import A` is only evaluated once? Isn't it technically a singleton instance? – thisismydesign Jan 13 '20 at 13:56
@thisismydesign Well it doesn't have a name outside the module - you cannot import the class itself - so you could call it anonymous :-) Yes, it is a singleton, which is not only an antipattern in itself (global state), but it is also an antipattern because using `class` syntax for singletons is discouraged. – Bergi Jan 13 '20 at 15:39
I get why it can be considered anonymous but the issues with anonymous classes that you linked don't apply here. You're right that this class definition is an anti-pattern though. However, I think the global state argument highly depends on the context (OP is asking about React), not sure why the [class syntax](https://stackoverflow.com/a/46184368/2771889) is discouraged either. – thisismydesign Jan 13 '20 at 21:43
@thisismydesign Because [a simple object literal](https://stackoverflow.com/a/1479341/1048572) should be used instead – Bergi Jan 13 '20 at 21:46
That isn't a singleton though, by definition. This is also discussed in detail in that thread. To be fair, this approach of exporting an instance isn't strictly a singleton either. – thisismydesign Jan 13 '20 at 21:49

score 5 · Answer 2 · answered Jan 13 '20 at 21:27

We don't recommend exporting an evaluation (e.g. new StateParser()) for several reasons.

In this case, the module exports the result which is only evaluated once (also mentioned by @Bergi). This is rarely the desired outcome, but if it is, a Singleton pattern should be used instead. Some ES6 module benefits are lost (tree-shaking and faster access to imports), it makes imports slower and makes them possible to cause side-effects which should rather happen upon invocation. I also think this is an anti-pattern and the drawbacks can be avoided via exporting a function or class.

It would make more sense to compare export default StateParser with exporting const methods.

Differences between creating a new class to using export const

2 Answers2

Linked