Constructors, Events & Actions in OOP

Object-oriented programming (OOP) is a paradigm that revolves around the concept of objects, which encapsulate data and behavior. Constructors, events, and actions are fundamental concepts in OOP that allow developers to initialize objects, handle events, and trigger actions based on certain conditions. In this post, we’ll explore these concepts in JavaScript, showcasing how constructors are used for object initialization, how events are handled, and how actions can be triggered within an object-oriented context.

Constructors (Object Initialization):

Constructors are special methods within a class that are used for initializing objects. When an object is created from a class using the new keyword, the constructor is automatically called to set up the object’s initial state. In JavaScript, constructors are defined using the constructor() method. Let’s illustrate this with an example:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
const john = new Person("John", 30);
console.log(john.name); // Output: John
console.log(john.age); // Output: 30

In this example, we have a Person class with a constructor that takes name and age parameters. When we create a new Person object (john), the constructor is invoked with the specified arguments, initializing the name and age properties of the john object.

Events

Events are occurrences that happen during the execution of a program, such as user interactions or system events. In OOP, events can be handled by defining event handlers within objects. Let’s see an example of handling a button click event using an object-oriented approach:

//Events tiggering methods from objects
events(){
  this.head.on("feels_cold", wearHat); //John represents this keyword & "feels_cold" is event which triggers wearHat action
  this.head.on("feels_hot", takeShower); // John "feels_hot" is event which triggers takeShower action/function
}

In this example, (this.head.on("feels_cold", wearHat);) Any object created with the class represents the ‘this‘ keyword and the event that triggers the action or function wearHat is "feels_cold". For the wearHat function, you will write a function that will make the object wear his hat in Actions.

Actions

Actions in OOP represent behaviors or operations that an object can perform. These actions are typically implemented as methods within a class.

//Methods (function, action) triggered from Events
wearHat(){
// Find and wear a Hat
}

In summary, Let’s demonstrate actions using a Car class:

class Car {
  constructor(brand) {
    this.brand = brand;
    this.speed = 0;
  }

  accelerate(amount) {
    this.speed += amount;
  }

  brake(amount) {
    this.speed -= amount;
  }

  displaySpeed() {
    console.log(Current speed of ${this.brand}: ${this.speed} km/h);
  }
}

const myCar = new Car("Toyota");
myCar.accelerate(50);
myCar.displaySpeed(); // Output: Current speed of Toyota: 50 km/h
myCar.brake(20);
myCar.displaySpeed(); // Output: Current speed of Toyota: 30 km/h

In this example, the Car class has methods accelerate() and brake() to change the car’s speed and a displaySpeed() method to show the current speed. We create a myCar object from the Car class and call its methods to perform actions like accelerating and braking.

In conclusion, constructors, events, and actions are integral aspects of object-oriented programming, enabling developers to initialize objects, handle events, and define behaviors within classes. Understanding these concepts is crucial for building modular, maintainable, and scalable applications in JavaScript and other object-oriented programming languages.