Master Object Oriented Programming: A Step-by-Step Guide

Object-Oriented Programming (OOP) is a programming paradigm that is based on the concept of "objects", which can contain data and code that manipulates that data.

An Object in JavaScript is a collection of properties, where each property has a name and a value. An object can store values of different data types, including other objects, which can be used to create complex data structures.

Here's an example of an object in JavaScript:

const person = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main St",
    city: "San Francisco",
    state: "CA"
  }
};

console.log(person.name); // outputs "John Doe"
console.log(person.address.city); // outputs "San Francisco"

Objects in JavaScript are mutable, meaning that you can add, modify, or delete properties and methods at any time. This makes them very flexible and versatile data structures that are used extensively in JavaScript programming.

Objects can be created in several ways in JavaScript, including using object literals, object constructors, and class constructors.

In OOP, the data and behavior of real-world entities are modeled as objects, making it easier to write code that reflects real-world scenarios. The concept and importance of OOP in JavaScript can be understood through the following reasons:

Better code organization: OOP provides a more structured way of organizing code, compared to procedural programming. With OOP, you can define the properties and methods of an object in a single place, making it easier to understand and maintain your code.

 class Person {
   constructor(name, age) {
     this.name = name;
     this.age = age;
   }

   sayHello() {
     console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
   }
 }

 const john = new Person("John Doe", 30);
 john.sayHello();
 // Output: Hello, my name is John Doe and I am 30 years old.

Inheritance: OOP provides a way to create objects that inherit properties and methods from a parent class. This allows you to define common properties and methods in a parent class and then inherit them in child classes, which can be specialized for specific purposes.

 class Person {
   constructor(name, age) {
     this.name = name;
     this.age = age;
   }

   sayHello() {
     console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
   }
 }

 class Student extends Person {
   constructor(name, age, major) {
     super(name, age);
     this.major = major;
   }

   sayHello() {
     console.log(`Hello, my name is ${this.name} and I am ${this.age} years old. I am studying ${this.major}.`);
   }
 }

 const john = new Student("John Doe", 30, "Computer Science");
 john.sayHello();
 // Output: Hello, my name is John Doe and I am 30 years old. I am studying Computer Science.

Reusability: It is a way of defining objects that can be reused in multiple parts of your application. You can define a class once and then create multiple instances of that class, which can be used in different parts of your application.

 class Person {
   constructor(name, age) {
     this.name = name;
     this.age = age;
   }

   sayHello() {
     console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
   }
 }

 const john = new Person("John Doe", 30);
 const jane = new Person("Jane Doe", 25);
 john.sayHello();
 // Output: Hello, my name is John Doe and I am 30 years old.
 jane.sayHello();
 // Output: Hello, my name is Jane Doe and I am 25 years old.

Composition: is a way of structuring objects in object-oriented programming by combining objects and behaviors from multiple classes into a single, composite object.

Let’s use another approach for the example:

 class Engine {
   start() {
     console.log("Engine started");
   }

   stop() {
     console.log("Engine stopped");
   }
 }

 class Lights {
   turnOn() {
     console.log("Lights turned on");
   }

   turnOff() {
     console.log("Lights turned off");
   }
 }

 class Car {
   constructor(engine, lights) {
     this.engine = engine;
     this.lights = lights;
   }

   start() {
     this.engine.start();
     this.lights.turnOn();
   }

   stop() {
     this.engine.stop();
     this.lights.turnOff();
   }
 }

 const carEngine = new Engine();
 const carLights = new Lights();
 const myCar = new Car(carEngine, carLights);

 myCar.start();
 // Output: Engine started
 //         Lights turned on

 myCar.stop();
 // Output: Engine stopped
 //         Lights turned off

Abstraction: This allows you to hide the complexity of your code and present a simplified interface to the user. This makes your code easier to understand and use, and reduces the likelihood of bugs.

 class BankAccount {
   constructor(balance) {
     this.balance = balance;
   }

   deposit(amount) {
     this.balance += amount;
   }

   withdraw(amount) {
     this.balance -= amount;
   }

   getBalance() {
     return this.balance;
   }
 }

 const account = new BankAccount(1000);
 account.deposit(500);
 console.log(account.getBalance()); // Output: 1500

 account.withdraw(200);
 console.log(account.getBalance()); // Output: 1300

Encapsulation: This is the process of hiding the implementation details of an object and exposing only the necessary information to the rest of the program. It reduces likelihood of bugs and make it more maintainable.

 class BankAccount {
   constructor(balance) {
     this._balance = balance;
   }

   deposit(amount) {
     this._balance += amount;
   }

   withdraw(amount) {
     this._balance -= amount;
   }

   getBalance() {
     return this._balance;
   }
 }

 const account = new BankAccount(1000);
 account.deposit(500);
 console.log(account.getBalance()); // Output: 1500

 account.withdraw(200);
 console.log(account.getBalance()); // Output: 1300

Polymorphism: It refers to the ability of objects to take on many forms. This allows you to create objects that can be used interchangeably, making your code more flexible and adaptable to changing requirements.

 class Shape {
   getArea() {
     return 0;
   }
 }

 class Circle extends Shape {
   constructor(radius) {
     super();
     this.radius = radius;
   }

   getArea() {
     return Math.PI * this.radius * this.radius;
   }
 }

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

   getArea() {
     return this.width * this.height;
   }
 }

 const circle = new Circle(10);
 const rectangle = new Rectangle(10, 20);

 console.log(circle.getArea()); // Output: 31.42...

For you to understand and master OOP in JavaScript requires good understanding of the concepts mentioned above. Here are few steps to help you:

Understand the core concepts: Make sure you understand the key concepts of OOP, such as encapsulation, inheritance, polymorphism, and abstraction.
Know how to use the class syntax: JavaScript has a class syntax that provides a more convenient way to create objects and define their behaviour.
Learn to use inheritance: Inheritance is a powerful feature of OOP that allows you to create new objects based on existing objects. Make sure you understand how to use inheritance to build more complex objects and reuse code.
Experiment with design patterns: There are many design patterns that can be used in OOP, such as the Singleton, Factory, and Decorator patterns. Spend time learning about these patterns and experimenting with them in your own code.
Read code written by others: Finally, make sure you spend time reading and studying code written by other developers. You can learn a lot from reading code written by others and seeing how they use OOP concepts in practice.

In conclusion, OOP provides a more structured and organized way of writing code, and it allows for better code reuse and abstraction through inheritance.

For more understanding you can check out this references: developer.mozilla.org/en-US/docs/Learn/Java..

https://www.simplilearn.com/tutorials/javascript-tutorial/oop-in-javascript .

Thanks for reading this far. Please give a like and share.

Mastering Object Oriented Programming in JavaScript