Object Oriented Programming With JavaScript - Part 1 🚀

JavaScript fundamentally adopts Object-Oriented Programming (OOP) principles.

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

Let's explore how JavaScript embodies OOP via its object-oriented functionalities.

📌 An Introduction to Objects

Objects serve as the cornerstone of JavaScript. They represent collections of key-value pairs, accommodating values of diverse data types, such as other objects or functions. One of their key features is their dynamic nature, enabling properties and methods to be manipulated—added, altered, or deleted—during runtime.

In JavaScript, declaring an object is straightforward through object literal notation, exemplified as follows:

let car = {
    brand: 'Toyota',
    model: 'Corolla',
    year: 2022,
    start: function() {
        return `${this.brand} ${this.model} started!`;
    }
};

Or by using the object constructor function:

let person = new Object();

person.name = 'John';
person.age = 30;
person.greet = function() {
    return `Hello, my name is ${this.name}.`;
};

Accessing Object Properties and Methods

To access properties and methods within an object, we can use dot notation or bracket notation, like so:

console.log(car.brand); // Dot notation to access property
console.log(car['model']); // Bracket notation to access property

console.log(car.start()); // Accessing object method

Quite straightforward, isn't it? However, what's the process for incorporating or altering these attributes?

car.color = 'blue'; // Adding a new property
car.year = 2023; // Modifying an existing property
delete car.model; // Removing a property

Object Prototypes and Inheritance

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

In JavaScript, each object possesses a prototype, from which it inherits both properties and methods. Delving deeper into this concept is our aim below.

Example of an object:

// Creating an object
let car = {
    brand: 'Toyota',
    model: 'Corolla',
    year: 2022,
    start: function() {
        return `${this.brand} ${this.model} started!`;
    }
};

// Accessing object properties
console.log(car.brand); // Output: Toyota

// Accessing object method
console.log(car.start()); // Output: Toyota Corolla started!

🔰 Prototypal Inheritance

In JavaScript, prototypal inheritance facilitates object inheritance. Every object in JavaScript possesses a prototype. When a property or method is accessed on an object, JavaScript initially searches for it directly within the object. If it's not found, it traverses through the object's prototype chain until the property or method is encountered, or until the chain ends at null.

Prototype Property

Each JavaScript function possesses a prototype property, initially an empty object. When a function serves as a constructor to instantiate objects via the new keyword, the prototype property of that function becomes the prototype of the freshly generated object.

An example:

// Creating a constructor function
function Vehicle(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
}

// Adding a method to the prototype of Vehicle
Vehicle.prototype.start = function() {
    return `${this.brand} ${this.model} started!`;
};

// Creating an instance of Vehicle
let car = new Vehicle('Toyota', 'Corolla', 2022);

console.log(car.start()); // Output: Toyota Corolla started!

In the example mentioned earlier, Vehicle functions as a constructor. By adding the start method to the Vehicle.prototype, it becomes accessible to all instances generated by invoking new Vehicle().

Inheritance through Prototypes

Prototypal inheritance enables objects to acquire properties and methods from their prototypes. When an object is instantiated through a constructor function, it automatically inherits properties and methods from the constructor's prototype.

Example:

function Vehicle(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
}

Vehicle.prototype.start = function() {
    return `${this.brand} ${this.model} started!`;
};

function Car(brand, model, year, color) {
    Vehicle.call(this, brand, model, year); // Call the Vehicle constructor
    this.color = color;
}

// Set Car's prototype to an instance of Vehicle
Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car; // Reset constructor

Car.prototype.drive = function() {
    return `The ${this.color} ${this.brand} ${this.model} is driving!`;
};

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

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

Part 2 will cover some essential concepts of Object-Oriented Programming, such as Encapsulation, Abstraction, and Polymorphism. 🔥

Happy Coding!