[CONCEPT] Object Oriented Programming basic concepts (OOP)

[LePhenix47]

Object-Oriented Programming (OOP) and its Application in Canvas-based JavaScript

Object-Oriented Programming (OOP) is a widely used paradigm in software development, particularly when working with canvases in JavaScript. OOP allows us to organize and structure our code by focusing on objects and their interactions.

It revolves around four essential pillars: encapsulation, inheritance, polymorphism, and abstraction. Let's explore each of these pillars:

1. Encapsulation

Encapsulation refers to the bundling of data and methods within an object. It allows us to group related data and functions together, providing a way to hide internal implementation details and only expose a public interface. This helps in achieving data integrity and reduces code complexity. With encapsulation, we can create objects that encapsulate their own state and behavior, making the code more modular and maintainable.

Example:

class Counter{
 private count;
 constructor(){
  this.initializeCounter();
 }

 private initializeCounter(){
   this.count = 0;
 }

 increment(){
  this.count++;
 }

  getCount(){
  return this.count
  }

 setCount(value){
  this.count = value
 }
}
const counter = new Counter();

//We modify the value indirectly with a method
counter.increment();
console.log(counter.getCount()) //1

counter.setCount(69_420);
console.log(counter.getCount()); //69 420

2. Abstraction

Abstraction involves simplifying complex systems by representing essential features and hiding unnecessary details. It allows us to create abstract classes or interfaces that define common properties and methods, without specifying their implementation. Abstraction helps in managing code complexity by providing a high-level view of objects and their interactions. It allows us to focus on what an object does rather than how it does it, promoting modularity and maintainability.

Example:

class Animal{
 //We're not specific on purpose
 //We only created a blueprint for creating different types of animals, 
 //such as Cat or Dog, and define the common behavior they should have
 constructor(name){
  this.name = name;
 }

 walk(){
  console.log(`${this.name} is walking`)
 }

 drink(){
  console.log(`${this.name} is drinking water`)
 }
}

//We are not supposed to create objects from abstract classes

3. Inheritance

Inheritance enables objects to inherit properties and methods from parent objects, forming an "is-a" relationship. It allows us to create hierarchical relationships between objects, where a child object inherits characteristics from its parent. Inheritance promotes code reusability and saves us from duplicating code. By extending existing objects or classes, we can add or override behavior as needed, building upon existing functionality.

Example:

class Cat extends Animal{
 constructor(name){
  //We inherit the methods of the Animal abstract class
   super(name);

   this.name = name;
 }

  meow(){
   console.log(`${this.name] just meowed`);
  }
}

const gatito = new Cat("Garfield");
gatito.walk(); //Garfield is walking
gatito.meow(); //Garfield is meowing

4. Polymorphism

Polymorphism allows objects to take on different forms or behaviors based on their context. It enables us to write code that can work with objects of different types, treating them interchangeably. Polymorphism is achieved through method overriding and method overloading. Method overriding allows a subclass to provide a different implementation of a method defined in its superclass, while method overloading allows multiple methods with the same name but different parameters. Polymorphism increases flexibility and extensibility in our code.

Example:

class Dog extends Animal{
 constructor(name, breed, age, gender){
   //We inherit the methods of the Animal abstract class
   super(name);

   this.name = name;
   this.breed = breed;
   this.age = age;
   this.gender = gender;
 }

  bark(){
   console.log(`${this.name] just barked`);
  }
}

//We created 2 different objects with the same class
const doggoOrlando = new Dog("Orlando", "German sheperd", 2, male);
const doggoMisty = new Dog("Misty", "Golden retriever", 5, female);

doggoOrlando.bark() //Orlando just barked
doggoOrlando.drink() //Orlando is drinking water

doggoMisty.bark() //Misty just barked
doggoMisty.drink() //Misty is drinking water

Conclusion

In conclusion, Object-Oriented Programming (OOP) provides a powerful approach to structuring and organizing code, particularly when working with canvases in JavaScript. By leveraging encapsulation, inheritance, polymorphism, and abstraction, we can create modular, reusable, and extensible code that facilitates building visually rich and interactive experiences with ease.