Understanding Object-Oriented Programming in JavaScript

Object-Oriented Programming (OOP) may sound a bit tough at first, but in reality, it’s not. It’s just a structured way to build software, where we design software around classes and objects.

In this article, we will deep dive into these concepts and understand how they work in real world programming.

---

What is Object-Oriented Programming?

OOPS is a paradigm in which software buit around Objects rather than functions or logic

these objects combine data(attributes) and actions(methods). JavaScript support functional and object-oriented styles so we can use it as our requirements.

in OOPs there are many concepts like polymorphism, inheritence, incapsulation etc.

---

What is Class?

Class is the most fundamental concept of OOPs in many programming language.

Imagine class like a blueprint for a car

• The blueprint itself is not a car it only defines what a car can have (properties) and what it can do (methods).

• Properties: color, brand, model

• Methods: start(), drive(), stop()

for creating a class in JavaScript we use class keyword with className it is best practice to create className Capitalize.

class Car {
  constructor(color, brand, model) {
    this.color = color;
    this.brand = brand;
    this.model = model;
  }

  start() {
    console.log("Car is starting");
  }

  drive() {
    console.log("Car is moving");
  }
}

The main components of class are:

• Properties (Attributes): Define the state or features of an object created from the class, example: color, brand, model

• Methods (Functions): Define the behavior or actions objects can perform, example: start(), drive()

• Constructor: A special method used to initialize properties when creating a new object.

---

Creating objects using classes

An object is a real life entity, it can be a specific car model, house anything, and it created by class instance that has data and methods.

When an object is created from a class, the class’s properties and methods become available to that object. The interesting part is that each object can also have its own unique properties, separate from other objects created from the same class.

Now let's create object using classes step by step

• Create a class using class keyowrd and Add a Constructor to initialize properties

  class Car {
    constructor(brand, speed) {
      this.brand = brand
      this.speed = speed
    }
  }
  

• Define common methods (behavior)

  class Car {
    constructor(brand, speed) {
      this.brand = brand
      this.speed = speed
    }
  
    drive() {
      console.log(this.brand + " is driving")
    }
  }
  

• Create an Object using new keyword and assign to variable, this variable is now a object.

  class Car {
    constructor(brand, speed) {
      this.brand = brand
      this.speed = speed
    }
  
    drive() {
      console.log(this.brand + " is driving")
    }
  }
  
  const car1 = new Car("BMW", 120)
  

• Now we can access properties and methods using object.

  class Car {
    constructor(brand, speed) {
      this.brand = brand
      this.speed = speed
    }
  
    drive() {
      console.log(this.brand + " is driving")
    }
  }
  
  const car1 = new Car("BMW", 120)
  
  console.log(car1.brand) // BMW
  car1.drive() // BMW is driving
  

---

Constructor method

Constructor is a special function used to create and initialize an object instance of a class, It is invoked using new keyword,

A constructor defined using constructor keyword. and using constructor we can create multiple instances with similar properties and methods.

Before ES6 constructor were created using regular function but in ES6 constructor method introduced.

Constructor method uses this keyoword, so it has access to all the properties of class.

class Car {
  constructor(brand, model, speed) {
    this.brand = brand
    this.model = model
    this.speed = speed
  }

  drive() {
    console.log(`\({this.brand} \){this.model} is driving at ${this.speed} km/h`)
  }
}

---

Methods inside a class

Methods are simply functions defined inside a class, and they can be accessed and called through the objects created from that class.

A class can include as many shared methods as needed, representing the behaviors that every object created from that blueprint can perform.

Like in our case a Car have drive(), accelerate() etc.

Example:

class Car {
  constructor(brand, speed) {
    this.brand = brand
    this.speed = speed
  }

  drive() {
    console.log(this.brand + " is driving")
  }

  accelerate() {
    this.speed += 10
    console.log(this.brand + " speed is now " + this.speed)
  }
}

const car1 = new Car("BMW", 120)

car1.drive()
car1.accelerate()

---

What is Encapsulation?

Encapsulation is a core Object-Oriented Programming (OOP) concept, it bundles data (variables) and the methods (functions) that operate on that data into a single unit. like a class.

Encapsulation protects data from external access for that we use access modifier like private and public.

Key points for encapsulation:

• Data Hiding: it control data from external access using access modifier: private or public.

• Bundling: It keeps data and methods into a single unit.

• Control: It allows for validation, ensuring that only valid data can be assigned to the fields

---

Assignments

1. Create a class Student using class keyword and curly brases {}. and define the constructor inside it.

2. Add properties into class like name and age of student.

3. Add a method called studentInfo() to print student details.

4. Now create multiple object of Student class using new keyword and call the studentInfo() method.

Conclusion

At the beginning, we discussed that software can be built even without OOP, but using OOP makes software more modular and well organized.

In this article, we learned what OOP is, what classes and objects are, how to create objects from a class, and concepts such as the constructor and encapsulation.

Hope you like it❤️