One of the keys for understanding, what is a class in javascript is the prototypical inheritance and prototypes. You can read more about prototypes in this article.
Javascript classes were introduced in ECMAScript 2015 version (ES6) and are templates for Javascript Objects.
You can consider javascript classes as just syntactical sugar on top of prototypical inheritance that derives new classes from other classes.
Their usage is to provide a cleaner and easier way to develop Object Oriented concepts.
Before the introduction of javascript classes, the developers used to use Function Constructors for this reason.
In this article, you are going to learn what is a class in javascript through examples in various use cases.
Definition
There are two ways to define a class. These are using a class declaration and class expression.
Class declaration
You can define a javascript class using the keyword class and a name for the class. A class body can contain methods and properties.
Furthermore, a class has to contain a special constructor method that you can use to instantiate an object that will follow the class’s structure.
To instantiate an object using a class you have to use the keyword new, the name of the class, and to pass any required arguments to the constructor method.
Let’s see a simple example.
See the Pen
Untitled by codebitshub (@codebitshub)
on CodePen.
As you can see in the code above, I defined a class named Dogs with the properties eats, num_of_legs, sound.
Additionally, I created an object named my_dog with the values “meat“, 4, and “barks“.
Finally, I defined a method named getInfo that will return all the properties of the class concatenated as a string as you can see below
info eats: meat, sound: barks, num_of_legs: 4
Class expression
The second way to define a class is using a class expression. Class expressions can be named or unnamed.
Let’s see an example.
See the Pen
class expression by codebitshub (@codebitshub)
on CodePen.
Inheritance
Inheritance is a concept that is common in Object-Oriented languages like Java and C++. In javascript, a class can be extended and inherit methods and properties from its parent class.
Let’s see an example.
See the Pen
inheritance by codebitshub (@codebitshub)
on CodePen.
As you can see in the code above, I have two classes where the class My_Dogs extends the class Dogs.
Each class has a constructor method. The class My_Dogs will call and pass all the required arguments to the constructor method of the Dogs class.
Furthermore, in the class My_Dogs I defined the getDetails method.
The object my_dogs will inherit all the properties/methods of the Dogs class plus its own.
Finally, you can notice in the logs that the prototype of My_Dogs class is the Dogs class.
Getters and Setters methods
Getters and setters methods are useful to define dynamically computed property values of an object.
The get syntax binds an object property to a function that you can invoke in order to compute and return the dynamically computed value.
Similarly, the set syntax binds an object property to a function that you can invoke in order to save a dynamically computed value.
There is no need to call the function directly. Both methods are creating a type of pseudo-property.
Let’s see some examples in objects.
See the Pen
getters-setters-objects by codebitshub (@codebitshub)
on CodePen.
Likewise, you can use getters and setters methods in classes.
See the Pen
getters-setters-classes by codebitshub (@codebitshub)
on CodePen.
You can see in the code above that I defined a class with the name TestSum.
Next, I declared a constructor method that I used to instantiate the object testSum.
Additionally, I declared the methods getSum, isCorrect (getters), and the method setSum (setter).
As a result, the getSum method returns the sum of the two numbers a, b.
Furthermore, you can use the setter method setSum to give an answer of the sum of the two numbers a,b.
Finally, the getter method isCorrect will check if your answer is correct or wrong and will log in the output the result.
4
Your answer is: correct
Hoisting
JavaScript Hoisting is the process that takes place when the interpreter moves the declaration of functions, variables, or classes to the top of their scope, before the execution of the code.
Classes that you define using a class declaration are hoisted. The difference is that the class is not initialized by default.
So if you try to execute it before the class initialization you will get a ReferenceError error.
Similarly, if you want to instantiate an object using a class expression you will have to define the class first.
As a result, if you try to instantiate an object before the line that you define the class then you will get a ReferenceError.
Let’s see an example.
See the Pen
Untitled by codebitshub (@codebitshub)
on CodePen.
If you run the code above you will get the following ReferenceError in the logs.
Uncaught ReferenceError: Cannot access ‘Dogs’ before initialization
Strict mode
You will have to remember that the javascript engine will always execute the body of a class in strict mode. So it is subject to stricter syntax, error checking, and performance optimizations.
Let’s see an example.
See the Pen
strict mode in classes by codebitshub (@codebitshub)
on CodePen.
As you can see in the code above the parameter eats is declared twice. That will throw a SyntaxError as you can see in the logs.
Uncaught SyntaxError: Duplicate parameter name not allowed in this context
Summary
Let’s summarize what you have learned so far.
- Classes in javascript are syntactical sugar for creating new objects with a similar structure.
- Each new object will share similar properties and methods
- You can define classes using class declarations and class expressions.
- You can extend a class and inherit properties and methods from its parent class.
- Classes and objects can have getters and setters methods which are a type of pseudo-properties.
- Even though classes are hoisted you will have to instantiate an object first.
- The body of a class is always executed in strict mode.
Happy coding!