Classes are a template/blueprint for objects. They simplify the process of creating multiple objects with similar properties and methods. Classes were not present in ES5 and were introduced in the ES6 version of JavaScript. Classes are merely syntactic sugar in JavaScript, built on top of prototypes, and work in the same manner behind the scenes.
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-1.jpeg" data-lazy- height="1512" src="data:image/svg xml,” width=”2048″>
How to use classes in JavaScript
Let’s take a programmer’s example who has to make five objects for five different users. He will write the following code:
const user1 = {
fName: “Mary” ,
lName: “Jane” ,
age: 23 ,
id: 01
};
const user2 = {
fName: “John” ,
lName: “Doe” ,
age: 47 ,
id: 02
};
const user3 = {
fName: “Jane” ,
lName: “Doe” ,
age: 34 ,
id: 03
};
const user4 = {
fName: “John” ,
lName: “Smith” ,
age: 18 ,
id: 04
};
const user5 = {
fName: “Mary” ,
lName: “Anne” ,
age: 22 ,
id: 05
};
In the example above, the code has a lot of repetitiveness as all the objects have similar properties. We can easily eliminate the repetitiveness in code and make it more organized by using a class.
In JavaScript, the class keyword is used to create a class. Classes in JavaScript use a method named constructor(). It automatically executes when creating a new object. It initializes the properties of the object.
classUser {
constructor(firstName, lastName, age, id) {
this.fName = firstName;
this.lName = lastName;
this.age = age;
this.id = id;
}
}
In the example above, we have created a new class named User. It serves as a template/blueprint for all the user objects we want to make. The constructor takes four arguments and makes four properties for each object. These properties are named fName, lName, age, and id and can be accessed by using the following syntax (after we have created the object)
object_name.property_name
The ‘this’ keyword in the example refers to the object that owns the age property. This keyword is used to access the value of a property within an object.
Now we will create the user objects shown in the first example using the User class.
classUser {
constructor(firstName, lastName, age, id) {
this.fName = firstName;
this.lName = lastName;
this.age = age;
this.id = id;
}
}
const user1 = newUser(‘Mary’, ‘Jane’, 23, 01);
const user2 = new User(‘John’, ‘Doe’, 47, 02);
const user3 = new User(‘Jane’, ‘Doe’, 34, 03);
const user4 = new User(‘John’, ‘Smith’, 18, 04);
const user5 = new User(‘Mary’, ‘Anne’, 22, 05);
Here you can see that the code has become a lot more readable.
What are methods in JavaScript classes
We can also add methods to classes in JavaScript. These methods can be easily added to the body of the class after the constructor by using the same syntax which is used in objects:
classUser {
constructor(firstName, lastName, age, id) {
this.fName = firstName;
this.lName = lastName;
this.age = age;
this.id = id;
}
birthYear() {
const date = newDate();
let Year = date.getFullYear() – this.age;
return Year;
}
}
const user1 = new User(‘Mary’, ‘Jane’, 23, 01);
const user2 = new User(‘John’, ‘Doe’, 47, 02);
const user3 = new User(‘Jane’, ‘Doe’, 34, 03);
const user4 = new User(‘John’, ‘Smith’, 18, 04);
const user5 = new User(‘Mary’, ‘Anne’, 22, 05);
Now, if we try to access the birthYear() method and print it on the console using the console.log() method, then we will get the following output:
console.log(user1.birthYear());
console.log(user2.birthYear());
console.log(user3.birthYear());
console.log(user4.birthYear());
console.log(user5.birthYear());</td>
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-400.png" data-lazy- height="163" src="data:image/svg xml,” width=”692″>
How to use the Getter and Setter methods
The Getter and Setter methods can be used in a class to get and set the value of a property in an object. Use the get or set keyword to use the getter or setter method, respectively:
classUser {
constructor(firstName, lastName, age, id) {
this.fName = firstName;
this.lName = lastName;
this.age = age;
this.id = id;
}
get userAge() {
returnthis.age;
}
set userAge(i) {
this.age = i;
}
}
const user1 = new User(‘Mary’, ‘Jane’, 23, 01);
console.log(user1.age); // will output 23
// setting the value of the age property
user1.userAge = 24;
console.log(user1.age); // will output 24
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-401.png" data-lazy- height="89" src="data:image/svg xml,” width=”689″>
Conclusion
Classes are code templates that are used to create new objects with similar properties and methods. They come in handy when the coder has to make several different objects with similar properties.
In this write-up, we have discussed classes. We learned how to use them to create objects. Moreover, we also learned to add different methods to objects using classes.
About the author
<img alt="" data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/7011409B3A384F43A8417D1DAC68D179-150×150.jpg" height="112" src="data:image/svg xml,” width=”112″>
Shehroz Azam
A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.
