CHAPTER 5: ADVANCED JAVASCRIPT CONCEPTS 5.2 Object-Oriented Programming in JavaScript

Object-oriented programming (OOP) is a foundational programming paradigm that emphasizes the use of objects and classes for organizing and structuring code. JavaScript, being a versatile language, supports both classical and prototypal inheritance, making it a robust choice for OOP. In this section, we delve into the principles of object-oriented programming in JavaScript and explore how to create and work with objects and classes.

Objects in JavaScript

In JavaScript, objects are collections of key-value pairs, where keys are strings (or symbols) and values can be any data type, including other objects. Objects are central to JavaScript and can be created in multiple ways:

// Creating an object using object literal syntax
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
};

// Creating an object using the Object constructor
const car = new Object();
car.make = "Toyota";
car.model = "Camry";
car.year = 2022;        

You can access object properties using dot notation (person.firstName) or bracket notation (person["firstName"]).

Prototypal Inheritance

JavaScript uses a prototypal inheritance model, where objects can inherit properties and methods from other objects. Every object in JavaScript has an associated prototype object, forming the basis of inheritance.

// Creating a prototype object
const vehiclePrototype = {
  startEngine() {
    console.log("Engine started.");
  },
};

// Creating an object that inherits from the prototype
const car = Object.create(vehiclePrototype);
car.make = "Toyota";
car.model = "Camry";
car.startEngine(); // Output: Engine started.        

In this example, the car object inherits the startEngine method from its prototype, vehiclePrototype.

Constructor Functions

Constructor functions are used to create multiple objects with similar properties and methods. They are conventionally named with an initial capital letter and are invoked using the new keyword.

// Constructor function for creating person objects
function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

// Creating person objects using the constructor
const person1 = new Person("Alice", "Johnson", 25);
const person2 = new Person("Bob", "Smith", 30);        

Constructor functions act as blueprints for creating objects, with the this keyword referring to the new object being created.

Classes in ES6

ES6 introduced the class syntax, providing a more structured way to define constructor functions and manage prototypes. Classes are syntactic sugar over constructor functions and prototypes, making OOP in JavaScript more intuitive.

// Defining a class for creating person objects
class Person {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }
}

// Creating person objects using the class
const person1 = new Person("Alice", "Johnson", 25);
const person2 = new Person("Bob", "Smith", 30);        

Classes can also define methods within their bodies, encapsulating behavior related to the class.

Inheritance with Classes

ES6 classes support inheritance through the extends keyword. You can create subclasses that inherit properties and methods from a parent class.

// Parent class
class Vehicle {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  startEngine() {
    console.log("Engine started.");
  }
}

// Subclass
class Car extends Vehicle {
  constructor(make, model, year) {
    super(make, model);
    this.year = year;
  }
}

const car = new Car("Toyota", "Camry", 2022);
car.startEngine(); // Output: Engine started.        

Here, the Car class inherits from the Vehicle class and extends its behavior.

Encapsulation and Abstraction

OOP principles such as encapsulation and abstraction allow for creating clean and maintainable code. Encapsulation involves bundling data (properties) and methods (functions) together within an object, providing control over their accessibility. Abstraction focuses on hiding complex implementation details and exposing a simplified interface.

Polymorphism and Inheritance

Polymorphism allows objects of different classes to be treated as objects of a common superclass. In JavaScript, polymorphism is achieved through method overriding and dynamic method binding.

class Animal {
  speak() {
    console.log("Animal makes a sound.");
  }
}

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

const animal = new Animal();
const dog = new Dog();
animal.speak(); // Output: Animal makes a sound.
dog.speak(); // Output: Dog barks.        

In this example, both animal and dog are treated as Animal objects, but their speak methods behave differently.

Object-oriented programming is a powerful paradigm for structuring and organizing code, and JavaScript provides the flexibility to implement OOP principles using both prototypes and classes. Understanding how to create and manipulate objects, use inheritance, and apply OOP concepts will help you write more modular, maintainable, and expressive JavaScript code for complex applications.