Javascript - Object-Oriented JavaScript

Object-Oriented JavaScript (OOP in JavaScript)

Introduction to Object-Oriented JavaScript

Object-Oriented JavaScript (OOP in JavaScript) is a powerful programming paradigm that allows developers to structure code using objects, classes, and reusable components. JavaScript, being a prototype-based language, provides flexible ways to implement object-oriented programming concepts such as encapsulation, inheritance, abstraction, and polymorphism.

In modern web development, understanding Object-Oriented JavaScript is essential for building scalable, maintainable, and reusable applications. Whether you are working on frontend frameworks or backend development using Node.js, mastering OOP concepts helps in writing clean and efficient code.

What is Object-Oriented Programming (OOP)?

Object-Oriented Programming (OOP) is a programming paradigm based on the concept of objects. Objects contain properties (data) and methods (functions). OOP helps organize code into reusable structures, improving readability and maintainability.

Core Principles of OOP

• Encapsulation
• Inheritance
• Polymorphism
• Abstraction

Objects in JavaScript

Objects are the building blocks of JavaScript OOP. An object is a collection of key-value pairs, where values can be properties or functions (methods).

const person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet();

Accessing Object Properties

console.log(person.name);
console.log(person["age"]);

Constructor Functions in JavaScript

Before ES6 classes, constructor functions were used to create multiple objects with similar properties.

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

const user1 = new Person("Alice", 25);
const user2 = new Person("Bob", 28);

console.log(user1.name);

ES6 Classes in JavaScript

ES6 introduced classes, making Object-Oriented JavaScript more structured and readable.

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

  greet() {
    console.log("Hello " + this.name);
  }
}

const user = new Person("David", 35);
user.greet();

Encapsulation in JavaScript

Encapsulation is the process of wrapping data and methods into a single unit and restricting direct access to some components.

class BankAccount {
  #balance = 0;

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

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount();
account.deposit(500);
console.log(account.getBalance());

Inheritance in JavaScript

Inheritance allows one class to inherit properties and methods from another class, promoting code reuse.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name + " makes a noise.");
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + " barks.");
  }
}

const dog = new Dog("Rex");
dog.speak();

Polymorphism in JavaScript

Polymorphism allows methods to behave differently based on the object calling them.

class Shape {
  draw() {
    console.log("Drawing shape");
  }
}

class Circle extends Shape {
  draw() {
    console.log("Drawing circle");
  }
}

class Square extends Shape {
  draw() {
    console.log("Drawing square");
  }
}

const shapes = [new Circle(), new Square()];
shapes.forEach(shape => shape.draw());

Abstraction in JavaScript

Abstraction hides implementation details and shows only essential features.

class Car {
  startEngine() {
    this.#ignite();
    console.log("Engine started");
  }

  #ignite() {
    console.log("Ignition process...");
  }
}

const car = new Car();
car.startEngine();

Prototypal Inheritance in JavaScript

JavaScript uses prototypal inheritance instead of classical inheritance. Every object has a prototype, allowing it to inherit properties and methods.

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(this.name + " makes a sound");
};

const cat = new Animal("Kitty");
cat.speak();

The Prototype Chain

The prototype chain is used to resolve property lookups. If a property is not found in an object, JavaScript looks up the prototype chain.

console.log(cat.toString());

Static Methods in JavaScript

Static methods belong to the class rather than instances of the class.

class MathUtils {
  static add(a, b) {
    return a + b;
  }
}

console.log(MathUtils.add(5, 3));

Getters and Setters

Getters and setters allow controlled access to object properties.

class User {
  constructor(name) {
    this._name = name;
  }

  get name() {
    return this._name;
  }

  set name(value) {
    this._name = value;
  }
}

const userObj = new User("Sam");
console.log(userObj.name);

Object.create() Method

Object.create() is used to create a new object with a specified prototype.

const animal = {
  speak() {
    console.log("Animal speaks");
  }
};

const dogObj = Object.create(animal);
dogObj.speak();

Composition vs Inheritance

Composition involves combining objects to achieve functionality, while inheritance relies on class hierarchy.

const canEat = {
  eat() {
    console.log("Eating...");
  }
};

const canWalk = {
  walk() {
    console.log("Walking...");
  }
};

const personObj = Object.assign({}, canEat, canWalk);
personObj.eat();
personObj.walk();

Object-Oriented JavaScript is a fundamental concept for modern developers. By understanding objects, classes, prototypes, and OOP principles, developers can build efficient and scalable applications. Mastering JavaScript OOP concepts ensures better code structure and maintainability, which is essential in real-world development.