Object Oriented Programming with JavaScript

JavaScript embraces Object-Oriented Programming (OOP) principles at its core.

OOP is a programming paradigm that focuses on modeling real-world entities as objects, allowing for better organization, reusability, and maintainability of code.

Let’s delve into how JavaScript implements OOP through its object-oriented features.

A Primer on Objects

In JavaScript, objects are the fundamental building blocks. They are collections of key-value pairs, where values can be of any data type, including other objects or functions. Objects in JavaScript are dynamic, allowing properties and methods to be added, modified, or removed at runtime.

To declare an object, we can use object literal notation, like so:

let car = {
    brand: 'Toyota',
    model: 'Corolla',
    year: 2022,
    start: function() {
        return `${this.brand} ${this.model} started!`;
    }
};

Or by using the object constructor function:

// Declaring the object
let person = new Object();

person.name = 'John';
person.age = 30;
person.greet = function() {
    return `Hello, my name is ${this.name}.`;
};

Accessing Object Properties and Methods

To access properties and methods within an object, we can use dot notation or bracket notation, like so:

console.log(car.brand); // Dot notation to access property
console.log(car['model']); // Bracket notation to access property

console.log(car.start()); // Accessing object method

Pretty simple, no? But how do we add, or modify these properties?

car.color = 'blue'; // Adding a new property
car.year = 2023; // Modifying an existing property
delete car.model; // Removing a property

Object Prototypes and Inheritance

One of the unique features of JavaScript is its prototypal inheritance model.

Every JavaScript object has a prototype, and objects inherit properties and methods from their prototype. Let’s explore this topic in more depth down below.

Example of an object

// Creating an object
let car = {
    brand: 'Toyota',
    model: 'Corolla',
    year: 2022,
    start: function() {
        return `${this.brand} ${this.model} started!`;
    }
};

// Accessing object properties
console.log(car.brand); // Output: Toyota

// Accessing object method
console.log(car.start()); // Output: Toyota Corolla started!

Prototypal Inheritance

JavaScript uses prototypal inheritance to enable object inheritance. Each object in JavaScript has a prototype, and when a property or method is accessed on an object, JavaScript first looks for it directly on the object.

If not found, it checks the object’s prototype, forming a chain until the property or method is found or until the prototype chain ends at null.

Prototype Property

Every function in JavaScript has a prototype property, which is an object (initially empty). When a function is used as a constructor to create objects using new, the prototype property of that function becomes the prototype of the newly created object.

An example:

// Creating a constructor function
function Vehicle(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
}

// Adding a method to the prototype of Vehicle
Vehicle.prototype.start = function() {
    return `${this.brand} ${this.model} started!`;
};

// Creating an instance of Vehicle
let car = new Vehicle('Toyota', 'Corolla', 2022);

console.log(car.start()); // Output: Toyota Corolla started!

In the example above, Vehicle is a constructor function. The start method is added to the Vehicle.prototype making it accessible to all instances created by new Vehicle().

Inheritance through Prototypes

Prototypal inheritance allows objects to inherit properties and methods from their prototypes. When an object is created using a constructor function, it inherits properties and methods from the constructor’s prototype.

Example:

function Vehicle(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
}

Vehicle.prototype.start = function() {
    return `${this.brand} ${this.model} started!`;
};

function Car(brand, model, year, color) {
    Vehicle.call(this, brand, model, year); // Call the Vehicle constructor
    this.color = color;
}

// Set Car's prototype to an instance of Vehicle
Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car; // Reset constructor

Car.prototype.drive = function() {
    return `The ${this.color} ${this.brand} ${this.model} is driving!`;
};

let myCar = new Car('Toyota', 'Corolla', 2022, 'blue');

console.log(myCar.start()); // Output: Toyota Corolla started!
console.log(myCar.drive()); // Output: The blue Toyota Corolla is driving!

Encapsulation and Abstraction

Encapsulation

Encapsulation involves bundling data (properties) and methods (functions) that operate on the data within a single unit, i.e., an object. This concept allows the object to control its own state and hide its implementation details from the outside world.

Encapsulation is achieved primarily through closures, scope, and access modifiers (though JavaScript lacks traditional access modifiers like private or public).

Using Closures for Encapsulation

Closures in JavaScript allow the creation of private variables and methods, restricting their access from outside the scope of the object:

function createCounter() {
    let count = 0; // Private variable
    return {
        increment: function() {
            count++;
        },
        getCount: function() {
            return count;
        }
    };
}

let counter = createCounter();
counter.increment();
console.log(counter.getCount()); // Output: 1
console.log(counter.count); // Output: undefined (count is private)

Here, count is encapsulated within the createCounter function, and the returned object provides controlled access to its state through increment and getCount methods.

Abstraction

Abstraction involves simplifying complex reality by modeling classes or objects that are appropriate to the problem. It allows developers to focus on the essential aspects of an object while hiding unnecessary details.

Abstraction can be achieved through the use of classes, interfaces, and abstract methods.

Example of Abstraction with Classes

class Shape {
    constructor(color) {
        this.color = color;
    }

    // Abstract method
    calculateArea() {
        throw new Error('Method must be implemented');
    }
}

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

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

let myCircle = new Circle(5, 'red');
console.log(myCircle.calculateArea()); // Output: ~78.54

Benefits of Encapsulation and Abstraction

• Security: Encapsulation hides sensitive data and exposes only necessary functionality, preventing direct access and modification of internal states.
• Modularity: Encapsulation allows objects to be developed independently, promoting modularity and easier maintenance.
• Simplicity: Abstraction simplifies complex systems by focusing on essential features, making code more understandable and manageable.

Polymorphism

Polymorphism, a core concept in OOP, allows objects of different classes to be treated as objects of a common superclass. In JavaScript, this is achieved through method overriding. Subclasses can redefine methods inherited from their parent classes, providing different implementations while maintaining the same method signature.

// Creating a superclass
class Animal {
    makeSound() {
        return 'Some generic sound';
    }
}

// Creating a subclass
class Dog extends Animal {
    makeSound() {
        return 'Woof!';
    }
}

// Creating instances
let genericAnimal = new Animal();
let dog = new Dog();

console.log(genericAnimal.makeSound()); // Output: Some generic sound
console.log(dog.makeSound()); // Output: Woof!

Conclusion

JavaScript’s implementation of OOP allows us to create flexible, reusable, and maintainable code by leveraging objects, prototypes, inheritance, encapsulation, abstraction, and polymorphism. Understanding these principles empowers us to design scalable and efficient applications in JavaScript.

Do you prefer OOP? Let us know in the comments.

FAQ

Q: What is Object-Oriented Programming (OOP) in JavaScript?

A: OOP in JavaScript is a programming paradigm that involves organizing code into objects, which encapsulate data (properties) and behaviors (methods). It allows for modularity, reusability, and abstraction of code components.

Q: How are objects created in JavaScript?

A: Objects in JavaScript can be created using object literal notation {}, constructor functions, class syntax introduced in ES6, and through the Object.create() method.

Q: What is prototypal inheritance in JavaScript?

A: Prototypal inheritance is a way objects inherit properties and methods from other objects. In JavaScript, each object has a prototype linked to it, and if a property or method is not found on an object, JavaScript traverses up the prototype chain until it finds it or reaches the end (where the prototype is null).

Q: How is encapsulation achieved in JavaScript?

A: Encapsulation in JavaScript involves bundling data and methods within an object to control access and hide implementation details.

While JavaScript lacks strict access modifiers, encapsulation can be achieved using closures, revealing module patterns, and naming conventions to denote private properties or methods.

Q: What is abstraction and how is it implemented in JavaScript?

A: Abstraction involves simplifying complex systems by focusing on essential details and hiding unnecessary complexity. In JavaScript, abstraction is implemented through the creation of classes, defining interfaces, and using abstract methods or inheritance to define common functionalities.

Q: How does JavaScript support polymorphism?

A: JavaScript supports polymorphism through method overriding. Subclasses can redefine methods inherited from their parent classes, providing different implementations while maintaining the same method signature. This allows different objects to be treated as instances of a common superclass.

Q: Are there any design patterns used in OOP with JavaScript?

A: Yes, JavaScript commonly utilizes design patterns like the Module Pattern, Factory Pattern, Singleton Pattern, Observer Pattern, and Prototype Pattern to address various design and structural needs in OOP.

Q: Is OOP mandatory for JavaScript development?

A: No, OOP is not mandatory for JavaScript development. While JavaScript supports OOP principles, it’s a versatile language that allows multiple paradigms (such as functional programming). The choice of paradigm depends on the project requirements and developer preference.