Understanding Object-Oriented Programming in JavaScript

Hi, welcome to a new article. In this article we will learn about object-oriented programming (OOPS) in JavaScript. So let's get started.

What object-oriented programming means

Object-oriented programming is a way of programming in which we do the coding around objects rather than functions. An object contains methods as well as data.

Okay, let's understand this with an example. Suppose you are a car manufacturer. Will you be building a car right from scratch?

No. You will always have a blueprint that tells you what the car should have, like wheels, an engine, a hood, etc. So you use that blueprint to create multiple cars, and each of those cars is an object having properties that are already present in the blueprint.

Object-oriented programming is also the same.

What is a class in JavaScript

Above we have discussed a blueprint. That blueprint in OOPs is called a class. A class is a template based on which different objects get created. The object created will inherit the properties and methods defined in the class, and the object can also have its own properties and methods.

// This is how a class id defined
class classname {
    constructor(param...){
        // properties
    }
    // Methods
}

// Example of a class
class car{
    constructor(brand, model, year){
        this.brand = brand,
        this.model = model,
        this.year = year
    }
    
    carInfo(){
        console.log(`\({this.model} of year \){this.year} is of brand ${this.brand}`);
    }
}

Creating objects using a class

We can create objects from classes using the new operator. Classes will provide the blueprint of what properties and methods will be there in the object that has been created. In class we have a method called "constructor," which initializes the properties of an object when a new instance/object is created.

// Example of a class
class car{
    constructor(brand, model, year){
        this.brand = brand,
        this.model = model,
        this.year = year
    }
    
    carInfo(){
        console.log(`\({this.model} of year \){this.year} is of brand ${this.brand}`);
    }
}

// Create an object 
let mercedesMayBach = new car('Mercedes', 'MayBach', '2026');

console.log(mercedesMayBach); 

mercedesMayBach.carInfo();

Constructor method

A constructor is a method of a class that is responsible for creating and initializing the properties in an object when a new object is created using the new operator. A class cannot have more than one constructor method. In the above example, I have used the constructor method.

Methods inside a class

Methods are nothing but the functions that are defined in a class. Below are some methods inside a class:

Constructor method: Initializes the properties in objects created using class.
Instance Method: The standard method is defined under the class and is available in all the instances/objects created from the class.
Static methods: The methods defined with the keyword "static," and they are available to the class only and not the instance.
getter method: This is the method used to fetch property value in a controlled way, and this function is accessible like a property.

class car{
    constructor(brand, model, year){
        this.brand = brand,
        this.model = model,
        this.year = year
    } // Constructor Method

    carInfo(){
        console.log(`\({this.model} of year \){this.year} is of brand ${this.brand}`)
    } // Instance Method

    get brandName(){
        console.log(`${this.brand}`)
    } // getter method

    static capitalizeBrandName(brandName){
        return brandName.toUpperCase();
    } // Static Method
}

// New Instance
let mayBach = new car('mercedes', 'MayBach', '2026'); 

// Print object
console.log(mayBach); 

// Use instance method
mayBach.carInfo();

// use getter method
mayBach.brandName;

// Use static method
let mayBach2 = car.capitalizeBrandName('mercedes');

console.log(mayBach2)

Basic idea of encapsulation

Encapsulation simply means bundling the data/properties and the methods working on data together, like we do in class. This is just like a car, you see. You don't see its internal workings. You just see the accelerator, brake, clutch, gearbox, and steering, and you use them to drive the car.

In JavaScript we can do encapsulation by making the methods/properties inside the class private by putting a symbol '#' in front of the method name.

class car{
    #model;
    constructor(brand, year){
        this.brand = brand,
        this.#model = 'MayBach',
        this.year = year
    } 
}

let car1 = new car('Mercedes', '2006');

console.log(car1);