When we should use class expression in Javascript?

Question

I have recently got to know that we do have class expressions too like function expressions in JS. I know some points about it(MDN) like:

Class expressions may omit the class name ("binding identifier"), which is not possible with class statements.
Class expressions allow you to redefine (re-declare) classes without throwing a SyntaxError.

I understand what it can help in, but where should be use it? What can be a classical example of using a class expression that can't be achieved with class statements or vice-versa?

You can say the same about function expressions, can you not? And yet we use them. — VLAZ, May 08 '22 at 14:15
We have used function expressions a lot, but never seen class expressions any where or may be they are not popular as much function expressions are. — Apoorva Chikara, May 08 '22 at 14:21
They aren't but consider they are also a very new feature compared to function expressions. Besides, seems like more trouble *disallowing* them and getting inconsistency rather than having them symmetric to functions. There are few use-cases for them here and there like making dynamic mixins to enhance existing classes with. However, how useful they are is a matter of opinion. I think it's a cool feature in theory but I've used it exactly zero times so far. It just isn't *that* useful. At least to code I write. — VLAZ, May 08 '22 at 14:24

T.J. Crowder · Accepted Answer · 2022-05-08T14:35:42.173

There aren't that many, but any time you're using class as a right-hand value, you're automatically using a class expression (just as with function expressions).

One place I've seen class expressions used is when wrapping classes:

function withLogging(BaseClass) {
     // The object is purely temporary, so we set the
     // name of the class dynamically
     const subclassName = BaseClass.name + "WithLogging";
     const obj = {
         [subclassName]: class extends BaseClass {
             log(msg) { console.log(msg); }
         },
     };
     return obj[subclassName];
}

I'm not saying that's a good idea (I'd probably use a mixin, or composition rather than inheritance), but I've seen it done.

   
   function withLogging(BaseClass) {
       // The object is purely temporary, so we set the
       // name of the class dynamically
       const subclassName = BaseClass.name + "WithLogging";
       const obj = {
           [subclassName]: class extends BaseClass {
               log(msg) { console.log(msg); }
           },
       };
       return obj[subclassName];
   }
   
   const X = withLogging(class Example { });
   console.log(X.name);
   new X().log("Hi there");

Something that looks like a class expression but is in fact more exotic than that is default exporting an unnamed class:
```
export default class { /*...*/ }
```
I really don't like that one, because A) I don't like default exports, and B) I don't like unnamed functions/classes (other than really simple callback functions, for instance to map or new Promise).

It's technically an anonymous class declaration (just as the equivalent would be an anonymous function declaration), but it's very similar to a class expression. (The default export case is the only place the specification allows anonymous class or function declarations.)

If you were creating an object with several classes on it:

const classes = {
     A: class A { /*...*/ },
     B: class B { /*...*/ },
     C: class C { /*...*/ },
};

(I don't think I've ever done that, but...)

score 3 · Answer 2 · answered May 08 '22 at 14:27

Class expressions are often used for subclass factories:

function createClass(…) {
    return class extends … {
        …
    };
}

This pattern is common e.g. for React higher-order components or one style of mixin implementation.

What can be a classical example of using a class expression that can't be achieved with class statements or vice-versa?

Nothing, really. Just like with function declarations vs expressions, they do not provide a feature that is not achievable with the other, but just offer a syntax that is more pleasing in specific scenarios.

When we should use class expression in Javascript?

2 Answers2