JavaScript, often referred to as the "language of the web," is a versatile and powerful programming language. One of its key strengths is its support for Object-Oriented Programming (OOP) principles. In this blog post, we'll dive into the world of OOP in JavaScript, exploring its key concepts and how to use them effectively.

Understanding Objects

At the core of Javascript OOP is objects. Everything in javascript under the hood is an object, An object is a collection of key-value pairs where keys are strings (or symbols) and values can be of any data type or even functions.

Here's an example of Object in Javascript -

const person = {
  name: "John",
  age: 30,
  sayHello: function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

person.sayHello(); // Output: Hello, my name is John and I am 30 years old.

Classes and Constructors in Javascript

In ES6(ECMAScript 6), Javascript introduced a more structured and general way of creating objects. A class is a blueprint for creating objects with shared properties and methods.

Example -

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

  Hello() { //no need to use function keyword in class
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person1 = new Person('John', 30);
const person2 = new Person('Jane', 25);

person1.Hello(); // Output: Hello, my name is John and I am 30 years old.
person2.Hello(); // Output: Hello, my name is Jane and I am 25 years old.

The constructor function of the class gets called whenever a new keyword is used to create the object of that class and initializes initial values for the object.

The "this" keyword helps in getting the context of the current object and setting the values.

Inheritance and Subclasses

JavaScript also supports inheritance through prototype-based inheritance. You can create a subclass (a child class) that inherits properties and methods from a parent class (a superclass).

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // Call the parent class constructor
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying for their ${this.grade} grade.`);
  }
}

const student1 = new Student('Alice', 12, '6th');
student1.sayHello(); // Output: Hello, my name is Alice and I am 12 years old.
student1.study();

The super() function calls the superclass constructor function.

using extends keyword class Student inherits properties and methods of class Person and now we can use the properties of Person class in a Student object.

This phenomena is called inheritance.

Encapsulation, Abstraction, and More

OOP in JavaScript allows you to implement essential OOP principles such as encapsulation and abstraction. You can hide internal details and expose only the necessary interfaces, making your code more modular and maintainable.

Additionally, JavaScript provides tools like getters and setters to control access to object properties, further enhancing encapsulation.

To learn more in depth about these topics I'll be providing blogs on the topics soon.

Conclusion

Object-Oriented Programming in JavaScript empowers developers to create structured, reusable, and maintainable code. Understanding objects, classes, constructors, and inheritance is fundamental to harnessing the power of OOP in JavaScript. With these concepts in your toolkit, you can design elegant and efficient solutions for a wide range of applications.