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:

1. Class expressions may omit the class name ("binding identifier"), which is not possible with class statements.

2. 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?

Answer 1

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...)

Answer 2

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.