Understanding JavaScript Classes
Classes are a template for creating objects. They encapsulate data with code to work on that data.
Classes are a template for creating objects. They encapsulate data with code to work on that data.
We declare classes in JavaScript using the class keyword. We put a constructor method in a class. This is a specialmethod. You initialize properties in the constructor method.
Defining a Class
We have two ways of defining classes in JavaScript.
-
Class Declaration
-
Class Expression
1. Class Declaration
To declare a class, we use the class keyword with the class name you desire as in the example below where our class name is Person.
Hoisting : Class decalarations are not hoisted. You first need to declare your class and then access or use it.
// Class declaration syntax
class Person {
constructor(name, country) {
// initialize Person properties here
this.name = name;
this.country = country;
}
}
- Create an object, person based on the class Person as shown below.
// Create an object, person, on the Person class
const person = new Person("Maye Edwin", "Kenya");
- Now the final class Person becomes as shown below.
// Es6 class syntax
class Person {
constructor(name, country) {
// Initialize Person properties here
this.name = name;
this.country = country;
}
}
// Create an object, person, on the Person class
const person = new Person("Maye Edwin", "Kenya");
- Creating more objects on the class Person.
// Adding custom methods to a class
class Person {
constructor(name, country) {
// Initialize Person properties here
this.name = name;
this.country = country;
}
// Create a custom method
Print() {
return { name: this.name, country: this.country };
}
}
// Create an object, person, on the Person class
const person = new Person("Maye Edwin", "Kenya");
- To call the custom method on the person's object, here is what to do.
// Calling the custom method on the person's object
person.Print();
You can as well send parameters to the custom print method, Print(). If the parameter name is say title, then we shall have;
// Sending a parameter to Print()
Print(title) {
return {
name :this.name,
country : this.country
};
}
- Calling the custom method on the person's object passing a parameter.
// Calling the custom method on the person's object
person.Print("CEO");
Static Methods
We define static methods on the class and to call it, we do it on the class as well. We use the static keyword to define static methods. Read more about this on this mozilla web docs spec.
// Defining a static method
static Employee(type) {
return type;
}
}
- Calling the static method on the class and passing a parameter.
// Calling 'Employee' on 'Person' and passing a parameter 'type'
Person.Employee("Fulltime");
}
Class Inheritance
We use the extends keyword to create classes which inherit methods from other classes. This is basically creating a class as a child of another class.
- The class below extends the parent class, Person used in the above examples. Read more about Inheritance on this mozilla web docs spec.
// Class Salary extends class Person
class Salary extends Person {
constructor(name) {
// Call the super class constructor and pass in the 'name' parameter
super(name);
}
}
The syntax in classes must be written in "strict mode". This makes sure that you do not use a variable before decalring it. A good practice indeed!
2. Class Expressions
Class expressions can be named or unnamed. If named, the name of the class is local to the class body only.
// Class expression syntax
const Person = class {
constructor(name, country) {
this.name = name;
this.country = country;
}
// Create a custom method
Print() {
return {this.name, this.country};
}
}
// Create an object, person, on the Person class
const person = new Person("Maye Edwin", "Kenya");
// Expected output is Name : Maye Edwin Country : Kenya
console.log(person.Print());
Got any question? You wanna have a chat? Hit my inbox on twitter asap 😉