:-) Simplified Javascript ES6 Class

Photo by Breno Assis on Unsplash

Javascript ES6 class is quite easy to reason about. Let’s start with a little hello world program.

// ES6 class Definition
class Hello World {
// Class constructor
 constructor(caller) {
  // Class Property of type {string}
  this.caller = caller;
 }
// class Method
  sayHello(){
    console.log(`Hello world to you, ${this.caller}`);
    return true;
  }
}

// Using the class Declare an instance of the class
const helloWorld = new HelloWorld('Grey');

// Call the sayHello method using the dot (.) notation
helloWorld.sayHello(); // Hello world to you Grey

What is a Class?

A class is a blueprint for an object you want to create. An “object” is a variable that holds data as attributes (class property) in key/value pairs representing something in the real world (like a user, an invoice, or a house), with methods or functions that can be implemented. Think of a class as an Architect would a building plan. From a blueprint of a house, an architect can create (instantiate) any number of houses.

Why Classes?

Classes are used in enabling consistency and scalability in whatever program you are creating, especially in situations where different parts of your application require the same or similar data structure and functionality.

Creating a Class

Let’s create a simple class for a House with no attribute (class property) or methods (class functions).

class House {

}

Adding Class Property & Method

What is a Class Property?

A class property is an attribute or thing that collectively describes the object. For example, a house has the following properties/attributes

• Number of rooms
• House colour
• Has a garage (true or false)
• Has a kitchen (true or false)
• Is available (true or false)

So let’s add some property to our House class. For us to do that, we need something called a constructor. A constructor allows us to create a class property.

class House {
  constructor(numberOfRooms, houseColour, hasGarage, hasKitchen) {
  // Public Property
  this.numberOfRooms = numberOfRooms;
  this.houseColour = houseColour;
  this.hasGarage = hasGarage;
  this.hasKitchen = hasKitchen;

  // Private Property
  this._isAvailable = false;
 }
}

What is a Class Method?

A class method is a member function that does something specific. For example, a house can be available or unavailable, consequently, we can create a function that will toggle the availability attribute of the object to true or false.

Let’s add two methods:

• One that would toggle availability by changing the isAvailable property value when called,
• and another that would return the availability property/attribute value.

class House {
  constructor(numberOfRooms, houseColour, hasGarage, hasKitchen) {
    // Public Property
    this.numberOfRooms = numberOfRooms;
    this.houseColour = houseColour;
    this.hasGarage = hasGarage;
    this.hasKitchen = hasKitchen;
    
    // Private Property
    this._isAvailable = false;
   }
  
  // A method to toggle house availability
  toggleAvailability() {
    this._isAvailable = !this._isAvailable;
  }
  
  // A method to get the availability property
  isAvailable() {
    return this._isAvailable;
  }
}

Instantiating a Class

That’s fancy talk for creating an object (a variable type) using the class as the blueprint. This object created will have the attributes and methods of the class. For example, let’s create two objects, one will a blue house and the other will be a brown house.

const blueHouse = new House(4,'Blue',true,true);
const brownHouse = new House(5,'Brown',true, true);

Both objects used the same class but passed their own property value that uniquely describes it. They both have access the to toggle (toggleAvailability()) and availability (isAvailable()) methods. You can call/access the methods in the following manner.

// Blue House
blueHouse.toggleAvailability();
blueHouse.isAvailable();

// Brown House
brownHouse.toggleAvailability();
brownHouse.isAvailable();

Next

In my next post, we shall be looking at other aspects of Class in a simplified way, like extending a class through sub/derived classes, or overriding a base class function within a sub/derived class.

Have a happy coding day!