javascript

Javascript: Working With Classes

Introduced in ES6 as a major update to the Object Oriented Programming concept in Javascript, Classes are templates for creating objects.

Classes can also referred to as the “syntactic sugar” of constructor functions. This means that they are an alternative way of writing constructor functions.

Working With a Class

One way to define a class is to use the class declaration. To declare a class, you use the “class” keyword followed by the name of the class.

class Rectangle{
}

Using constructor Method

A constructor method is a special method created within a declared class.

Constructor methods are used to initialize object properties created within that class.

There can only be one special method with the name “constructor” within a class. A syntaxError will be thrown if a class contains more than one instance of a constructor method.

class Rectangle{
constructor(width, height){
this.width = width;
this.height = height;
}
}

Class Methods

class methods can be referred to as a special method within your declared class.

This special class manipulates, interacts with or showcase the object properties created with the constructor method.

For instance, after declaring the properties “width” and “height” of the Rectangle class, it is possible that we also want to interact with these declared properties and perform some kind of calculation with them.

Also, after creating this special method that performs the calculation, we might also want to create another method that calls this method so that the result can be seen when it is called through the class instance.

class Rectangle{
constructor(width, height){
this.width = width;
this.height = height;
}

//Method
calcArea(){
return this.width * this.height;
}

//Getter
getArea(){
return this.calcArea();
}
}

Just writing the code like this and running it won’t give any result.

We need to now create an instance of this our “Rectangle” class so that we can showcase the logic that we have created.

We create an instance like so …

const rectangle = new Rectangle(10,10);
console.log(rectangle.getArea()); //100

Full Working Code:

class Rectangle{
constructor(width, height){
this.width = width;
this.height = height;
}

//Method
calcArea(){
return this.width * this.height;
}

//Getter
getArea(){
return this.calcArea();
}
}

const rectangle = new Rectangle(10,10);
console.log(rectangle.getArea()); //100

Recent Posts

How to Dynamically Create, Update, and Delete HTML Elements

In modern web development, dynamically manipulating HTML elements is essential for creating interactive and responsive…

4 days ago

Why parseInt(’09’) Returns 0

If you've ever encountered the puzzling behavior of parseInt('09') returning 0 in JavaScript, you're not…

7 days ago

Event Bubbling and Capturing: Why Your Click Listener Fires Twice (And How to Fix It)

If you’ve ever built an interactive web application, you may have encountered a puzzling issue:…

2 weeks ago

Practical Array Methods for Everyday Coding

Arrays are the backbone of programming, used in nearly every application. Whether you're manipulating data,…

2 weeks ago

What the Heck Is the Event Loop? (Explained With Pizza Shop Analogies)

If you've ever tried to learn JavaScript, you’ve probably heard about the "Event Loop"—that mysterious,…

3 weeks ago

Why [] === [] Returns false in JavaScript (And How to Properly Compare Arrays & Objects)

JavaScript can sometimes behave in unexpected ways, especially when comparing arrays and objects. If you've…

3 weeks ago