Manik Agnish
Understanding Object-Oriented Programming in JavaScript

Understanding Object-Oriented Programming in JavaScript

A Beginner's Guide to Object-Oriented Programming Essentials

Manik Agnish's photo
Manik Agnish
·

7 min read

Table of contents

Object-Oriented Programming (OOP) is a programming paradigm that uses "objects" to design applications and programs. JavaScript, traditionally known for its prototype-based model, has evolved to incorporate class-based object-oriented programming features, making it more accessible for developers coming from different programming backgrounds. In this blog, we will explore the core concepts of OOP in JavaScript: Objects, Classes, Abstraction, Encapsulation, Inheritance, and Polymorphism.

Understanding Objects

Objects in JavaScript can be seen as collections of properties and methods. You can think of an object as a box that contains items, where each item has a name (a key) and a value. These values can be data or functions (methods).

Creating Objects

  • Object Literals: This is the simplest way to create an object in JavaScript. You simply list its properties and methods inside curly braces {}.
const person = {
  name: "Kira",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // Output: Hello, my name is Kira
  • Constructor Functions: You can create objects using constructor functions, which are regular functions that are used to create objects with the new keyword. This pattern is similar to class instantiation in other languages.
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
  };
}

const person = new Person('Kira', 30);
person.greet(); // Output: Hello, my name is Kira

Imagine constructor functions as a blueprint for a building. Every time you want to build a new house (object), you use the same blueprint but can customise the size, color, etc.

Classes: Modern Blueprint for Creating Objects

Introduced in ES6, classes in JavaScript are a syntactic sugar over the prototype-based OO pattern. They provide a clearer and more concise way to create objects and handle inheritance. Classes are to JavaScript what blueprints are to architects, a plan to build objects.

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

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const alice = new Person("Kira", 28);
alice.greet(); // Output: Hello, my name is Kira

Think of a class as a cookie cutter and objects as the cookies made with it. Each cookie (object) will have the same shape (properties) and features (methods), but you can make as many as you want from the same cutter (class).

Abstraction: Simplifying Complexity

Abstraction is like the dashboard of your car. When you drive, you don't need to understand the complex mechanisms behind the brake system, the engine's inner workings, or how fuel gets injected. You just use the brake pedal, the gas pedal, and the steering wheel. Abstraction in programming hides the complex reality while exposing only the necessary parts.

In JavaScript, while we don't have interfaces or abstract classes like in other languages, we achieve abstraction by limiting access to certain components and exposing only what's necessary through the class's methods.

Let's consider a real-world analogy: a TV remote. You have buttons like power, volume, and channel change. Internally, the remote does a lot of work (sending infrared signals, for example), but you don't need to know that. You just use the buttons.

Translating this to JavaScript, let's imagine we're creating a class for a MusicPlayer. The complexity of how the music is loaded and played is hidden from the user, who interacts with simple methods like play, pause, or skipTrack.

class MusicPlayer {
  #currentTrack;
  #playlist;

  constructor(playlist) {
    this.#playlist = playlist;
    this.#currentTrack = 0;
  }

  play() {
    console.log(`Playing: ${this.#playlist[this.#currentTrack].name}`);
    // Code to play the music
  }

  pause() {
    console.log("Music paused.");
    // Code to pause the music
  }

  skipTrack() {
    this.#currentTrack = (this.#currentTrack + 1) % this.#playlist.length;
    this.play();
  }

  // More methods to interact with the music player
}

// The user interacts with the MusicPlayer through its public methods,
// without needing to understand its internal workings.
const myPlaylist = [{ name: "Song 1" }, { name: "Song 2" }];
const myMusicPlayer = new MusicPlayer(myPlaylist);
myMusicPlayer.play(); // Outputs: Playing: Song 1
myMusicPlayer.skipTrack(); // Outputs: Playing: Song 2

In this example, the #currentTrack and #playlist properties are kept private within the MusicPlayer class (with the help of # prefix), preventing external access. This encapsulation is a key aspect of abstraction, where the user of the MusicPlayer does not need to know or understand how tracks are managed or how the play functionality is implemented. They only need to interact with the public methods provided, such as play, pause, and skipTrack.

Through abstraction, we simplify the usage of complex systems, making them more accessible and user-friendly. This concept, while more abstract (pun intended) in JavaScript, is crucial for creating clean, maintainable, and easy-to-use code.

Encapsulation: Keeping Secrets

Encapsulation in OOP is like owning a house with a garden. You are free to do whatever you want inside your property without letting anyone else know about it. You might have a dog that can freely roam within the fences, but it's not visible or accessible from the outside. In programming, encapsulation means keeping some of the object's properties and methods private, so they can't be accessed from outside the object. This is where JavaScript uses the # prefix to denote private properties or methods.

class BankAccount {
  #balance;

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  deposit(amount) {
    if (amount > 0) {
      this.#balance += amount;
      console.log("Deposit successful");
    }
  }

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

Inheritance: Standing on the Shoulders of Giants

Inheritance allows a class to inherit properties and methods from another class. Imagine you're writing a fantasy novel. You create a general class called Character with properties like name, strength, and magic. Then, you decide to create specific character types like Warrior and Mage. Instead of writing completely new classes from scratch, you let Warrior and Mage inherit the properties and methods from Character and add their unique attributes or methods.

class Character {
  constructor(name, strength, magic) {
    this.name = name;
    this.strength = strength;
    this.magic = magic;
  }
}

class Warrior extends Character {
  constructor(name, strength, magic, weapon) {
    super(name, strength, magic);
    this.weapon = weapon;
  }
}

class Mage extends Character {
  constructor(name, strength, magic, spell) {
    super(name, strength, magic);
    this.spell = spell;
  }
}

Polymorphism: Many Forms, One Interface

Polymorphism allows objects of different classes to be treated as objects of a common superclass. It's like having a universal remote control that can operate your TV, DVD player, and stereo system. Each device has its specifics, but the remote sends commands in a way each device understands. In programming, polymorphism lets us design objects that share certain properties or methods but implement them differently.

class Animal {
  makeSound() {
    console.log("Some generic sound");
  }
}

class Dog extends Animal {
  makeSound() {
    console.log("Bark");
  }
}

class Cat extends Animal {
  makeSound() {
    console.log("Meow");
  }
}

const myDog = new Dog();
const myCat = new Cat();

// Though myDog and myCat are instances of different classes,
// we interact with them through the common interface of makeSound().
myDog.makeSound(); // Bark
myCat.makeSound(); // Meow

Summary:

  • Objects: Entities storing data and functionality, akin to containers holding various items, in JavaScript represented by key-value pairs.

  • Classes: Blueprint for creating objects with predefined properties and methods, resembling cookie cutters generating cookies of uniform shape and features.

  • Abstraction: Hiding complex implementation details and revealing only necessary functionalities, akin to using a TV remote without needing to understand its internal workings.

  • Encapsulation: Bundling data and methods within a class while restricting access to certain components, similar to owning a house with a private garden, hidden from external view.

  • Inheritance: Mechanism allowing a class to inherit properties and methods from another class, comparable to building on top of existing structures, inheriting their qualities.

  • Polymorphism: Ability for objects of different classes to be treated as instances of their parent class, akin to a universal remote control operating various devices, each responding to commands differently.

In summary, JavaScript's approach to OOP allows you to structure your code in a way that is both powerful and flexible, enabling you to build complex applications more efficiently. Through understanding and applying these concepts, you're equipped to dive deeper into the language and explore its capabilities further. Remember, the key to mastering these concepts is practice and real-world application. Happy coding!

OOPSJavaScriptfundamentalsclassesES6