Object-Oriented Programming in JS

Object-Oriented Programming (OOP) is a programming paradigm that is based on the concept of "objects" which have properties and methods. JavaScript, being a versatile and dynamic language, supports OOP through its object-oriented features like constructor functions, prototypes, and classes.

1. Object :

In JavaScript, an object can be created using object literals, which is a simple and common way to create an object. An object literal is a comma-separated list of key-value pairs wrapped in curly braces. For example:

let person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

2. constructor function

In JavaScript, functions are also objects, and they can be used to create objects using a constructor function. A constructor function is a special type of function that creates and initializes an object when it is called with the new keyword. The this keyword inside a constructor function refers to the new object being created. For example:

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  this.fullName = function() {
    return this.firstName + " " + this.lastName;
  }
}

let john = new Person("John", "Doe", 30);
console.log(john.fullName()); // "John Doe"

3.Factory functions

are a design pattern that is used to create objects in JavaScript. A factory function is a function that returns an object. Unlike the constructor function, it does not require the new keyword to create an object.

For example, the following code defines a factory function that creates an object representing a person:

Copy codefunction createPerson(firstName, lastName, age) {
    return {
        firstName: firstName,
        lastName: lastName,
        age: age,
        fullName: function() {
            return this.firstName + " " + this.lastName;
        }
    }
}

let john = createPerson("John", "Doe", 30);
console.log(john.fullName()); // "John Doe"

Factory functions are commonly used to create similar objects, such as multiple instances of a class. They can also be used to create objects with different initial states.

Factory functions are also useful when you need to return a new object, with a different state each time, without having to create a new object type. They are also useful when you want to encapsulate the object creation process and hide the implementation details.

In addition, factory functions can be useful when you want to return an object with a different structure than the one created by the constructor.

In short, factory functions are a useful tool for creating objects in JavaScript, and they offer a lot of flexibility and control over the object creation process.

4.Prototype :

JavaScript also has a feature called prototypes, which allows you to add methods and properties to an object. When a property or a method is accessed on an object, JavaScript first looks for it on the object itself, and if it is not found, it looks for it on the object's prototype. For example:

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

Person.prototype.fullName = function() {
    return this.firstName + " " + this.lastName;
}

let john= new Person("John", "Doe", 30);
console.log(john.fullName()); // "John Doe"

//example 2.
 let car={
     color:"white",
     sunRoof:"NO"
 }
 let verna ={
     price:"5 Lakh",
     gear : "Automatic",
     __proto__:car     //properties of car fatched into its prototype           
 }
 console.log(verna)
// //other method is verna.__proto__=car   //Or you can also do  let verna=object.create(car)
 //modern syntax for same is Object.setPrototypeOf(verna,car)

5. Class :

In recent versions of JavaScript, the class keyword was introduced as a way to create objects using a class-based syntax that is similar to other object-oriented languages like Java or C#. The class syntax allows you to define a blueprint for an object, which is called a class, and then create instances of that class. For example:

class Person {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }
  fullName() {
    return this.firstName + " " + this.lastName;
  }
}
let john = new Person("John", "Doe", 30);
console.log(john.fullName()); // "John Doe"

6. Inheritance :

It is one of the fundamental concepts of OOP and it can be achieved in JavaScript using prototypes and classes. Inheritance allows an object to inherit properties and methods from another object. For example:

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  fullName() {
    return this.firstName + " " + this.lastName;
  }
}

class Employee extends Person {
  constructor(firstName, lastName, employeeId) {
    super(firstName, lastName);
    this.employeeId = employeeId;
  }
}

let john = new Employee("John", "Doe", 12345);
console.log(john.fullName()); // "John Doe"

In conclusion, JavaScript supports OOP through its object-oriented features like object literals, constructor functions, prototypes and classes which makes it easy to create and work with objects. Understanding and utilizing the concepts of OOP in JavaScript can help you create more organized, maintainable and reusable code.

Ashish's Blog