Object Oriented Programming With JavaScript – Part 1 🚀

JavaScript essentially adopts Object-Oriented Programming (OOP) rules.

OOP, a programming paradigm, revolves round representing real-world entities as objects, facilitating superior code group, reusability, and maintainability.

Let’s discover how JavaScript embodies OOP through its object-oriented functionalities.

📌 An Introduction to Objects

Objects function the cornerstone of JavaScript. They symbolize collections of key-value pairs, accommodating values of numerous information varieties, resembling different objects or capabilities. Considered one of their key options is their dynamic nature, enabling properties and strategies to be manipulated—added, altered, or deleted—throughout runtime.

In JavaScript, declaring an object is simple via object literal notation, exemplified as follows:

let automotive = {
    model: 'Toyota',
    mannequin: 'Corolla',
    yr: 2022,
    begin: operate() {
        return `${this.model} ${this.mannequin} began!`;
    }
};

Or by utilizing the item constructor operate:

let individual = new Object();

individual.identify = 'John';
individual.age = 30;
individual.greet = operate() {
    return `Hey, my identify is ${this.identify}.`;
};

Accessing Object Properties and Strategies

To entry properties and strategies inside an object, we are able to use dot notation or bracket notation, like so:

console.log(automotive.model); // Dot notation to entry property
console.log(automotive['model']); // Bracket notation to entry property

console.log(automotive.begin()); // Accessing object methodology

Fairly simple, is not it? Nevertheless, what is the course of for incorporating or altering these attributes?

automotive.coloration = 'blue'; // Including a brand new property
automotive.yr = 2023; // Modifying an current property
delete automotive.mannequin; // Eradicating a property

Object Prototypes and Inheritance

The distinctive side of JavaScript lies in its prototypal inheritance system.

In JavaScript, every object possesses a prototype, from which it inherits each properties and strategies. Delving deeper into this idea is our goal under.

Instance of an object:

// Creating an object
let automotive = {
    model: 'Toyota',
    mannequin: 'Corolla',
    yr: 2022,
    begin: operate() {
        return `${this.model} ${this.mannequin} began!`;
    }
};

// Accessing object properties
console.log(automotive.model); // Output: Toyota

// Accessing object methodology
console.log(automotive.begin()); // Output: Toyota Corolla began!

🔰 Prototypal Inheritance

In JavaScript, prototypal inheritance facilitates object inheritance. Each object in JavaScript possesses a prototype. When a property or methodology is accessed on an object, JavaScript initially searches for it immediately inside the object. If it is not discovered, it traverses via the item’s prototype chain till the property or methodology is encountered, or till the chain ends at null.

Prototype Property

Every JavaScript operate possesses a prototype property, initially an empty object. When a operate serves as a constructor to instantiate objects through the new key phrase, the prototype property of that operate turns into the prototype of the freshly generated object.

An instance:

// Making a constructor operate
operate Automobile(model, mannequin, yr) {
    this.model = model;
    this.mannequin = mannequin;
    this.yr = yr;
}

// Including a way to the prototype of Automobile
Automobile.prototype.begin = operate() {
    return `${this.model} ${this.mannequin} began!`;
};

// Creating an occasion of Automobile
let automotive = new Automobile('Toyota', 'Corolla', 2022);

console.log(automotive.begin()); // Output: Toyota Corolla began!

Within the instance talked about earlier, ‘Automobile’ capabilities as a constructor. By including the beginning methodology to the Automobile.prototype, it turns into accessible to all cases generated by invoking ‘new Automobile()’.

Inheritance via Prototypes

Prototypal inheritance allows objects to accumulate properties and strategies from their prototypes. When an object is instantiated via a constructor operate, it mechanically inherits properties and strategies from the constructor’s prototype.

Instance:

operate Automobile(model, mannequin, yr) {
    this.model = model;
    this.mannequin = mannequin;
    this.yr = yr;
}

Automobile.prototype.begin = operate() {
    return `${this.model} ${this.mannequin} began!`;
};

operate Automotive(model, mannequin, yr, coloration) {
    Automobile.name(this, model, mannequin, yr); // Name the Automobile constructor
    this.coloration = coloration;
}

// Set Automotive's prototype to an occasion of Automobile
Automotive.prototype = Object.create(Automobile.prototype);
Automotive.prototype.constructor = Automotive; // Reset constructor

Automotive.prototype.drive = operate() {
    return `The ${this.coloration} ${this.model} ${this.mannequin} is driving!`;
};

let myCar = new Automotive('Toyota', 'Corolla', 2022, 'blue');

console.log(myCar.begin()); // Output: Toyota Corolla began!
console.log(myCar.drive()); // Output: The blue Toyota Corolla is driving!

Half 2 will cowl some important ideas of Object-Oriented Programming, resembling Encapsulation, Abstraction, and Polymorphism. 🔥

Blissful Coding! 💪