JS Handbook: OOPs

This article from js series is going to be very short, as currently I am personally shifting to oops paradigm of programming, so will be covering whatever I have learned so far, and to be precise (this article is not prepared from an interview perspective YET!). Will be updating this as I gain more insights about this paradigm specifically in JS.

OOPs which stands for Object Oriented Programming. is a programming paradigm (a way of organizing/writing code). grouping variables, methods within a class.

The Four Principles of OOPS:

• Objects encapsulate data (variables, methods) within classes.

• Classes act as a blueprint for each object.

• Encapsulation ensures data safety

• Inheritane enables different classes to inherit the object properties of classes its inherting from.

---

Classes and Objects -

Before evening starting with OOPs I would like to clarify one thing that JS is not really an object oriented language, instead its a prototype-based language.

What is prototype-based language? Its basically creating/deriving objects from existing objects. But due to prototype-based programming we are able to integrate the OOPs concepts too. The class keyword which enables us to create a class is just a syntactic sugar over prototypes.

Everything is an object from arrays, functions to classes. just modified with the help of prototypes

class test{
    constructor(subjectName,difficulty){
        this.name = name;
        this.difficulty = difficulty;
    }
}

//instances of test (individual objects generated 
const test1 = new test("math", "high"); 
const test2 = new test("social science", "mid");

console.log(typeof test) //function

Think of Classes as functional constructor for creating an object :

function test(subjectName,difficulty){
    this.name = name;
    this.difficulty = difficulty;
}

//instances of test (individual objects generated 
const test1 = new test("math", "high"); 
const test2 = new test("social science", "mid");

As you can see from above examples they are similar just with different naming conventions.

These individual instances being created, are possible because of the new keyword whose job is to:

1. Create new empty object

2. Linking the prototypes

3. binding 'this' with the newly generated object(transfering properties)

4. returning explicitly the newly created object

We can add methods too inside a class, where we creating a class of Potions -

class Potion{
    constructor(name, lethality){
        this.name = name,
        this.lethality = lethality
        
    }
    worksBestOn = function(demon){
        return `effectiveness: ${demon}`;
    }
}

const healingPotion = new Potion("healing", 0);
console.log(healingPotion.worksBestOn("Bests")) //effectiveness: Beasts

So far I discissed about the first 2 principles, i.e. how does an object encapsulate data & classes that act as a blueprint for each individual instance(newly created object).

Encapsulation & Inheritance

Lets discuss this from a very high level understanding perspective since I myself haven't dealt with what they have for us to use.

Lets begin by understanding Encapsulation, from the word it clarifies what it means, but I'd like to talk in terms of programming, what it really means is that when we group code variables to methods in a single place (Classes) and able to access it safely by generating a copy of the blueprint for each individual instance (objects).
Thats the only job of Encapsulation.

On the Other hand we can also infer from the word Inheritance, Inheriting something from someone for example you inheriting wealth from your parents, similarly when a classes used an extends keys it technically inherits the properties of a particular class to itself.

class Marks{
    constructor(subject, grade){
        this.subject = subject,
        this.grade = grade
    }
}

class Student extends Marks{
    constructor(name, section){
        this.name = name,
        this.section = section
    }
}

const student1 = new Student("Job Snow", "C");
student1.subject = "literature"
student1.grade = "A"
//we are able to access the constructor properties of class Marks from the student itself, which is possible due to inheritance.

So far this is the complete basics of OOPs in JS, which i will be updating as I keep on learning more and more and start becoming fluent with this programming paradigm.

Stay tuned! A like and a share will be very much appreciate 🫶.