Class Expressions
Class expressions are useful to create dynamic classes at runtime based on, for example, properties you read from a file, database, or user-provided input. Imagine creating a class factory function that will create and return a class—that’s a good place to use a class expression.
JavaScript supports both a class statement—which you use to define a class—and a class expression. The two key differences between a class expression and a class statement are
-
The class name is optional for class expressions but required for class statements.
-
The class expression should be treated as an expression—that is, it should be returned, passed to another function, or be stored in a variable.
Class statements are more common than class expressions, but the latter is useful to create classes dynamically.
Let’s create a function that acts as a class factory—that is, it dynamically creates and returns a class with fields provided as parameters to the call.
| | const createClass = function(...fields) { |
| | return class { |
| | constructor(...values) { |
| | fields.forEach((field, index) => this[field] = values[index]); |
| | } |
| | }; |
| | }; |
The createClass() function takes a rest parameter, fields, to hold the names of the fields of the class to be created. Within the body of the function, we use a class expression to create and return a class with no explicit name—this feature enables us to create C#-like anonymous classes in JavaScript. Within the anonymous class, we create a constructor, which also takes a rest parameter of values to be assigned to the fields. Since the field names are not known at code writing time, we use the [] notation to access the fields based on their names contained in the fields array.
The class created from a call to this function is anonymous, but we can assign any name to it on the receiving end, like Book or Actor, for example:
| | const Book = createClass('title', 'subtitle', 'pages'); |
| | const Actor = createClass('firstName', 'lastName', 'yearStarted'); |
Once we obtain a reference to classes created using class expressions, we can use them like classes defined using the class statement. Let’s create an instance of the Actor class we created using class expression.
| | const fisher = new Actor('Carrie', 'Fisher', 1969); |
| | console.log(fisher); |
To the constructor we passed values for each field of the class. These correspond to the field names we provided in the second call to the createClass() function. Here’s the output of this code, showing the details of the instance created.
| | { firstName: 'Carrie', lastName: 'Fisher', yearStarted: 1969 } |
Since our class was not given a name during creation, the output shows the instance like it’s a JavaScript object—there’s no class name prefix in the output.
In rare situations, you may find it useful to give a name for a class defined using a class expression. For example:
| | const Movie = class Show { |
| | constructor() { |
| | console.log('creating instance...'); |
| | console.log(Show); |
| | } |
| | }; |
| | |
| | console.log('Movie is the class name'); |
| | console.log(Movie); |
| | const classic = new Movie('Gone with the Wind'); |
| | |
| | try { |
| | console.log('however...'); |
| | console.log(Show); |
| | } catch(ex) { |
| | console.log(ex.message); |
| | } |
The name Show is visible only within the class. Outside, the class is known only by the name to which the expression was assigned—Movie in this example. If we try to refer to it using the internal name Show, we will run into a runtime exception, as we see in the output:
| | Movie is the class name |
| | [Function: Show] |
| | creating instance... |
| | [Function: Show] |
| | however... |
| | Show is not defined |
The internal name is useful to call a static method of the class that is defined using class expression from within an instance method or another static method of the class.
Although two classes can’t have the same name, multiple classes defined using class expression can have the same internal name.
You’ve learned how to create classes with the updated syntax. Next let’s take a look at some built-in classes available in modern JavaScript.