Class Fields Explained – What Is a JavaScript Class Field?
A class field is a property defined directly in a class’s body—not inside any of the class’s methods.
How to Create Class Fields in JavaScript
You can create a class field by using an equal sign (=
)—not a colon (:
)—to assign a value to a property.
Here’s an example:
The Name
class in the snippet above has two class fields (firstName
and lastName
).
Note the following:
- JavaScript class fields default to
undefined
if you do not provide any value. - Class fields are like the regular object properties whose names you can compute. Let’s discuss how.
How to Create Class Fields with Computed Names
You can compute (evaluate) a class field’s name by putting an expression in a square bracket like so:
We used the [enSuites + ++num]
syntax in the snippet above to compute the class fields’ names.
In other words, JavaScript evaluated the enSuites + ++num
expression and used the result as each class field’s name.
Note: You can also define class fields as regular JavaScript methods. Let’s talk more about this now.
How to Create Regular Class Field Methods
You can create a regular class field method by using an equal sign (=
) to assign a function to a property.
Here’s an example:
The hourNow
and minutesNow
methods in the snippet above are class field methods because they are properties containing regular JavaScript functions.
JavaScript allows you to use shorthand syntax to shorten your class’s methods. Let’s see how.
How to Create Shorthand Class Field Methods
The shorthand class field method is a concise way of defining JavaScript methods in the body of your classes.
Here’s an example:
Although you can use the regular and shorthand methods interchangeably in your class’s body, you should know a significant difference between the two syntaxes. Let’s discuss it now.
Regular vs. Shorthand Class Field Methods: What’s the Difference?
The main difference between regular and shorthand class field methods is this:
- Regular methods are instance properties, while shorthand methods are prototypal properties.
In other words, JavaScript treats regular and shorthand methods differently as follows:
- Regular method: JavaScript adds the method to the object instance you construct with the
new
keyword. Therefore, regular methods are own properties of the object instance. - Shorthand method: JavaScript adds the method to the class’s
prototype
property. Therefore, shorthand methods are prototypal properties of an object instance.
Here’s an example:
The currentTime
object instance contains only the hourNow
property because regular methods are instance properties the new
keyword assigns to the object it constructs from its constructor class.
On the other hand, shorthand methods are prototypal methods that JavaScript adds to the prototype
property of the class you’ve defined them.
Therefore, you can access the minuteNow
method through its class’s prototypal inheritance like so:
You can see that Time
’s prototype
property contains the minutesNow
method, which all object instances will inherit automatically.
Here’s an example:
The currentTime.minutesNow()
code returned a valid value because currentTime
inherited the minuteNow()
method from its constructor’s prototype
property.
Note: A JavaScript class has two types of prototypal methods:
- User-defined methods
- Constructor methods
Let’s discuss the two types now.
Design and develop at the same time
What Is a User-Defined Prototypal Method in JavaScript Classes?
A user-defined prototypal method is the shorthand method you create yourself in the body of your JavaScript class.
Here’s an example:
The firstName()
method is a user-defined method because we created it ourselves in the body of the Name
class.
What Is a Constructor Method in JavaScript Classes?
A constructor()
is the default prototypal method that comes built-in with every JavaScript class.
Creating a constructor
method is optional. However, if you do not create one, JavaScript will automatically add an empty one.
The constructor method automatically receives the arguments you pass to the class. Therefore, it is the ideal place to define the class fields that depend on the class invocator’s arguments.
Here’s an example:
The Name
class above has a constructor
method with one instance property in its code block.
JavaScript executes the constructor method before any other user-defined methods. Therefore, it is the best place to define any code you want to run before other methods in the class’s body. For instance, consider the code below:
The snippet above automatically invoked the constructor
method while creating myCarColor
’s object instance.
Therefore, the computer processed the constructor’s statements before executing the myCarColor.revealColor()
code.
Note the following:
- You can only use the JavaScript method shorthand technique to define a constructor. Otherwise, browsers will throw an
Uncaught SyntaxError
. - A class can have only one
constructor
method. Otherwise, browsers will throw anUncaught SyntaxError
.
Now that we know how to create class fields, we can discuss the available types.
Create your web presence in no time
Types of Class Fields
The three types of class fields are:
- Public class fields
- Private class fields
- Static class fields
Let’s discuss each type.
What is a public class field in JavaScript classes?
A public class field is a property an object instance has access to.
Example: How to create public class fields
The Name
class in the snippet above contains public class fields because you can use the class’s object instances to access and modify the two properties.
Suppose you define multiple public class fields with the same name. In that case, the last property will overwrite the previous ones.
Example: The last public class field overwrites the previous ones with the same name
The snippet above returned "CodeSweetly"
because the last myName
public class field overwrites the previously declared ones.
What is a private class field in JavaScript classes?
A private class field is a property you can only access and modify within the class’s body.
You can prefix a class field with the hash (#
) symbol to make it a private property.
Express Your Love for Coding!
Example: How to create private class fields
The snippet above returned undefined
because myName
is a private class field that can only be read and modified from within the class’s body.
Therefore, you need to use an internal code to access myName
.
Example: How to access private class fields
What is a static class field in JavaScript classes?
A static class field is a property you can only access and modify directly from the class itself.
In other words, JavaScript interprets static fields as a class’s own properties—not instance or prototypal properties.
Therefore, a class’s instance or prototype
object cannot access static class fields.
We prefix a class field with the static
keyword to make it a static property.
Example: How to create static class fields
The snippet above returned undefined
because myName
is a static class field you can only read and modify from the class itself, not through the class’s instance.
In other words, you need to call myName
on the class itself to read or modify it.
Example: How to access static class fields
Suppose you define multiple static class fields with the same name. In that case, the last property will overwrite the previous ones.
Example: The last static class field overwrites the previous ones with the same name
The snippet above returned "CodeSweetly"
because the last myName
static class field overwrites the previously declared ones.
Static vs. Instance vs. Prototypal Class Fields
- A static class field is the own property of the class.
- An instance class field is a property JavaScript adds to the object the
new
keyword creates from the class. - A prototypal class field is a property JavaScript adds to the class’s prototype chain.
Static vs. Instance vs. Prototypal Class Field Methods
- A static class field method is a method (regular or shorthand) you can only access and modify directly from the class itself. It is the own property of the class.
- An instance class field method is a regular method JavaScript adds to the object instance the
new
keyword creates from the class. It is the own property of the object instance. - A prototypal class field method is a shorthand method JavaScript adds to a class’s
prototype
property. You can access and modify it through the prototype chain. It is the prototypal property of the class.