DEV Community

Mohamed Zurfudeen
Mohamed Zurfudeen

Posted on

Object-Oriented Programming in JavaScript

Object-oriented programming (OOP) is a popular paradigm used in many programming languages, including JavaScript. It allows developers to create more organized and modular code by grouping related data and functions into objects. In this article, we'll explore how to implement OOP in JavaScript.

Classes and Objects

In OOP, classes are blueprints for creating objects. They define the properties and methods that an object will have. In JavaScript, classes are created using the 'class' keyword:

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

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

Enter fullscreen mode Exit fullscreen mode

Here, we've defined a Person class with a constructor that takes 'name' and 'age' parameters and sets them as properties on the object. We've also defined a 'sayHello' method that logs a message to the console.

To create an object from a class, we use the new keyword:

const john = new Person('John', 30);
john.sayHello(); // logs "Hello, my name is John and I'm 30 years old."

Enter fullscreen mode Exit fullscreen mode

Inheritance

One of the key benefits of OOP is the ability to create new classes based on existing ones. This is called inheritance. In JavaScript, we can use the 'extends' keyword to create a subclass:

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'm a ${this.major} major.`);
  }
}

Enter fullscreen mode Exit fullscreen mode

Here, we've created a 'Student' class that extends the 'Person' class. It has a constructor that takes a 'major' parameter in addition to the 'name' and 'age' parameters. We've also overridden the 'sayHello' method to log a different message.

When we create a 'Student' object, it will inherit the properties and methods from the 'Person' class:

const jane = new Student('Jane', 20, 'Computer Science');
jane.sayHello(); // logs "Hello, my name is Jane and I'm a Computer Science major."

Enter fullscreen mode Exit fullscreen mode

Encapsulation

Encapsulation is the practice of hiding the implementation details of a class from outside code. In JavaScript, we can use closures to achieve encapsulation:

class BankAccount {
  constructor(initialBalance) {
    let balance = initialBalance;

    this.getBalance = function() {
      return balance;
    };

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

    this.withdraw = function(amount) {
      if (amount > balance) {
        throw new Error('Insufficient funds');
      }

      balance -= amount;
    };
  }
}

Enter fullscreen mode Exit fullscreen mode

Here, we've created a 'BankAccount' class that has a private 'balance' variable. We've exposed three methods ('getBalance', 'deposit', and 'withdraw') that manipulate the 'balance' variable, but the variable itself is not directly accessible from outside code.

Conclusion

Object-oriented programming is a powerful paradigm that can help make your JavaScript code more organized and modular. Classes and objects, inheritance, and encapsulation are just a few of the features that make OOP so useful. By mastering these concepts, you'll be well on your way to writing more efficient and maintainable code.

Top comments (0)