Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

291
Views
When we should use class expression in Javascript?

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?

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report

0

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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!