JavaScript, despite being primarily known as a scripting language for web development, offers powerful object-oriented programming (OOP) capabilities. OOP allows you to create reusable and modular code, leading to more maintainable and scalable applications. In this blog post, we will explore the key concepts and principles of OOP in JavaScript and understand how to leverage them effectively.

Introduction to OOP Concepts

Object-Oriented Programming (OOP) is a programming paradigm that organizes code around objects, which are instances of classes. OOP provides a set of principles and concepts that allow developers to structure their code in a more modular, reusable, and maintainable manner. By leveraging OOP concepts, developers can create software that is easier to understand, extend, and modify.

Here are some fundamental concepts of OOP:

Objects

An object is a self-contained entity that combines both data (properties) and actions (methods) related to a specific thing or concept. It can represent a real-world object or an abstract concept in your code. Objects are like containers that hold related information and actions together.

Let's consider an example of a "Car" object:

//Creating the JavaScript Objects 
const car = {
  brand: "Toyota",
  model: "Camry",
  year: 2022,
  color: "Silver",
  startEngine: function() {
    console.log("The car's engine is starting...");
  },
  accelerate: function() {
    console.log("The car is accelerating...");
  },
  stopEngine: function() {
    console.log("The car's engine is stopping...");
  }
};

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

// Calling object methods
car.startEngine(); // Output: The car's engine is starting...
car.accelerate(); // Output: The car is accelerating...
car.stopEngine(); // Output: The car's engine is stopping...

In the above example, the car object represents a specific car instance with properties like brand, model, year, and color. It also has methods like startEngine(), accelerate(), and stopEngine() which defines the actions the car can perform.

By accessing the properties of the object (car.brand, car.year), we can retrieve specific information about the car. Similarly, by calling the methods of the object (car.startEngine(), car.accelerate()), we can trigger specific actions related to the car.

Objects are powerful because they allow you to organize and encapsulate related data and actions together, making it easier to work with and manipulate complex entities in your code.

Classes

A class is like a blueprint or a template that defines the structure and behavior of objects. It serves as a blueprint for creating multiple instances of objects with similar characteristics.

Let's consider an example of a "Person" class:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }

  celebrateBirthday() {
    this.age++;
    console.log(`Happy birthday! Now I am ${this.age} years old.`);
  }
}

// Creating instances of Person
const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);

// Accessing object properties
console.log(person1.name); // Output: Alice
console.log(person2.age); // Output: 30

// Calling object methods
person1.sayHello(); // Output: Hello, my name is Alice.
person2.celebrateBirthday(); /* Output: Happy birthday!
                               Now I am 31 years old.*/

In the above example, the Person class defines the structure and behaviour of a person object. It has a constructor method that sets the initial values of name and age properties. It also has methods like sayHello() and celebrateBirthday() that define the actions a person can perform.

By creating instances of the Person class (person1, person2), we can create individual person objects with their specific values for name and age. We can access the properties of each person object (person1.name, person2.age) and call the methods defined in the class (person1.sayHello(), person2.celebrateBirthday()).

Now let us know what is class, constructor, new and this keyword does

`Class:`

the class keyword is used to define a new class. A class is a blueprint or template for creating objects that share common properties newand behaviors. It provides a way to organize and structure code by grouping related data and functions together.

Example:

Example:class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

In the above example, we define a Person class using the class keyword. Inside the class, we have a constructor method (constructor(name, age)) and a greet() method.

`constructor:`

A constructor is a special method within a class that is called when an object is created from the class. It is used to initialize the object's properties or perform any setup required for the object. In JavaScript, the constructor method is defined using the constructor keyword.

Example:

In the "Person" class, the constructor method constructor(name, age) takes two parameters: name and age. Inside the constructor, the this keyword is used to refer to the current object being created. It allows us to assign the provided values name and age to the object's properties.

javascriptCopy codeclass Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  // ...
}

When we create a new instance of the "Person" class using the new keyword, the constructor is automatically called with the provided arguments.

`new:`

The new keyword is used to create an instance (object) of a class. It initializes the object and calls the constructor method of the class. It allocates memory for the object and sets up the necessary environment for it.

Example:

javascriptCopy codeconst person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);

In the above example, we create two instances of the "Person" class using the new keyword. The new keyword followed by the class name (new Person(...)) invokes the constructor method of the class, passing the provided arguments to initialize the object. It allocates memory for the person objects and sets up their initial properties.

`this:`

The this keyword refers to the current object being created or accessed within a class. It allows you to access and modify the object's properties and call its methods. The this keyword ensures that each object's properties and methods are unique to that object.

Example:

In the "Person" class, the this keyword is used within the constructor to assign values to the object's properties (this.name = name;, this.age = age;). It is also used within the methods to refer to the object's properties when called.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

In the above example, when we call the sayHello() method using person1.sayHello(), the this keyword inside the method refers to the person1 object, allowing us to access the name property specific to that object.

The this keyword is essential in distinguishing and manipulating the properties and methods of individual objects created from a class.

NOTE:

this keyword behaves differently when used inside regular functions compared to arrow functions. Let's explore the differences and how exceptions can occur

this in Regular Functions:

In regular functions, the value of this is determined dynamically based on how the function is called or invoked. It typically refers to the object that is calling the function or the object to which the method belongs.

Example:

const person = {
  name: "Alice",
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // Output: Hello, my name is Alice.

const greetFunction = person.greet;
greetFunction(); // Output: Hello, my name is undefined.

In the above example, the greet() method of the person object is called using person.greet(). Inside the method, this refers to the person object, allowing us to access the name property.

However, when we assign the greet function to a new variable greetFunction and call it directly (greetFunction()), this no longer refers to the person object. In this case, this becomes the global object (window in a browser or global in Node.js), and since there is no name property defined on the global object, it output undefined.

this in Arrow Functions:

Arrow functions, introduced in ES6, do not have their own this binding. Instead, they lexically capture the this value from the surrounding scope (the context in which the arrow function is defined). The value of this inside an arrow function is determined by the context where the arrow function is declared.

Example:

const person = {
  name: "Alice",
  greet: function() {
    const greetArrow = () => {
      console.log(`Hello, my name is ${this.name}.`);
    };
    greetArrow();
  }
};

person.greet(); // Output: Hello, my name is Alice.

In the above example, the greet() method contains an arrow function greetArrow. The arrow function captures the this value from the surrounding greet function. Therefore, even when greetArrow() is called inside greet(), this still refers to the person object.

Benefits of using OOP's in JavaScript

Here are some benefits of using Object-Oriented Programming (OOP) in JavaScript

Modularity: OOP allows you to break your code into self-contained objects, making it easier to understand, maintain, and reuse code blocks.
Reusability: You can create reusable objects and classes, reducing code duplication and promoting efficient development.
Encapsulation: OOP allows you to encapsulate data and related functionality within objects, protecting the data from outside interference and providing a clean interface for interacting with the object.
Code Organization: OOP provides a structured approach to organizing code, making it more manageable and easier to navigate.
Inheritance: With inheritance, you can create new classes based on existing ones, inheriting their properties and behaviours. This promotes code reuse and reduces redundant code.
Polymorphism: OOP allows objects to take on multiple forms, meaning that different objects can respond to the same method in different ways. This flexibility promotes code extensibility and adaptability.
Collaboration: OOP facilitates collaboration among team members by providing a standardized way of thinking about and structuring code, making it easier to work together on projects.
Scalability: OOP supports scalability by providing a structured approach to managing and expanding code as the project grows, making it easier to add new features or modify existing ones.

By leveraging OOP principles, you can write cleaner, more organized, and more maintainable JavaScript code, leading to improved productivity and better software development practices.

Prototypes and Prototypal Inheritance:

Prototypes and prototypal inheritance are important concepts in JavaScript that allow objects to inherit properties and methods from other objects.

Prototype Chain

Certainly! The prototype chain is a fundamental concept in JavaScript that determines how objects inherit properties and methods from their prototypes. Let's explain it in simple words with an example:

In JavaScript, every object has a property called [[Prototype]] (often referred to as the "dunder prototype"). This property points to another object called its prototype. When you try to access a property or method on an object, JavaScript first looks for it on the object itself. If it doesn't find it, it continues searching in the object's prototype. This process continues until the property or method is found or until the end of the prototype chain is reached.

Example:

const person = {
  name: "Alice"
};

const employee = {
  salary: 50000
};

employee.__proto__ = person;

console.log(employee.name); // Output: Alice

when we execute this in the console through a web browser.

In the above example, we have two objects: person and employee. The person object has a name property, while the employee object has a salary property. We then set the [[Prototype]] of employee to be the person object using the __proto__ property.

When we try to access the name property on the employee object (employee.name), JavaScript first checks if the employee object has its own name property. Since it doesn't, it goes up the prototype chain to the person object and finds the name property there. Therefore, the output is "Alice".

This is how the prototype chain works: it allows objects to inherit properties and methods from their prototypes, creating a hierarchical relationship between objects. If a property or method is not found in an object, JavaScript looks for it in the object's prototype, and so on, until it reaches the end of the prototype chain.

It's important to note that the prototype chain can be traversed using the __proto__ property, but it's recommended to use the Object.getPrototypeOf() method instead, as direct manipulation of __proto__ is considered deprecated.

console.log(Object.getPrototypeOf(employee)); // Output: { name: "Alice" }
console.log(Object.getPrototypeOf(person)); // Output: {}

In the above example, we use Object.getPrototypeOf() to access the prototype of employee and person.

Understanding the prototype chain is crucial for working with objects in JavaScript, as it enables inheritance and the sharing of properties and methods among objects, resulting in code reusability and extensibility.

Creating objects using prototypes

To create objects using prototypes, we typically use constructor functions or the class syntax in JavaScript. These allow us to define a template or blueprint for objects and then create new instances of those objects.

Example using constructor function:

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

const person1 = new Person("Alice");
const person2 = new Person("Bob");

person1.greet(); // Output: Hello, my name is Alice.
person2.greet(); // Output: Hello,

Inheriting properties and methods

Inheriting properties and methods allow objects to acquire the characteristics of other objects, typically referred to as their parent or prototype objects. This enables code reuse and promotes a hierarchical structure where objects build upon the behavior defined in their prototypes.

To illustrate this, let's consider an example involving a parent object called Animal and a child object called Dog.

// Parent object
const Animal = {
  sleep: function() {
    console.log("Zzzz...");
  }
};

// Child object inheriting from the parent object
const Dog = Object.create(Animal);
Dog.bark = function() {
  console.log("Woof!");
};

// Create a new instance of Dog
const myDog = Object.create(Dog);

In the above example, we have a parent object Animal with a method sleep that outputs "Zzzz...". The child object Dog is created using Object.create(Animal), setting the prototype of Dog to be the Animal object. The Dog object then adds its own method bark that outputs "Woof!".

By setting the prototype of Dog to Animal, the Dog object inherits the sleep method from the Animal object. This means that instances of Dog, such as myDog, can access both the inherited method sleep and the own method bark.

myDog.sleep(); // Output: Zzzz...
myDog.bark(); // Output: Woof!

In the example, myDog can call the inherited sleep method defined in Animal as well as the bark method defined in Dog. This is possible because the prototype chain allows the Dog object to search for methods in its own properties first and then in its prototype (Animal), ensuring that inherited properties and methods are accessible.

Inheriting properties and methods through prototypal inheritance helps maintain code organization, promotes code reuse, and allows for efficient memory utilization. It allows objects to share common behaviour while enabling flexibility for customization and extension in child objects.

Remember, prototypal inheritance is just one way to achieve code reuse and object composition in JavaScript. With the introduction of ES6 classes, you can also utilize class syntax to define and extend objects with more structured and familiar syntax.

ES6 Classes and Inheritance:

ES6 (ECMAScript 2015) introduced a new syntax called "classes" to JavaScript, providing a more structured and familiar way to define objects and their behavior. ES6 classes are primarily syntactic sugar on top of the existing prototypal inheritance model. Let's explore the introduction to ES6 classes in detail with examples:

Class:

To define a class in JavaScript, you use the class keyword followed by the name of the class. The class can have a constructor method for initializing object instances, as well as other methods and properties.

Example:

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

In the above example, we define a class called Person using the class keyword. It has a constructor method, denoted by the constructor keyword, which takes a name parameter and assigns it to the name property of the object. The class also has a greet method that outputs a greeting message using the name property.

Creating Object Instances:

To create instances of a class, you use the new keyword followed by the class name, along with any required constructor arguments.

Example:

const person1 = new Person("Alice");
const person2 = new Person("Bob");

person1.greet(); // Output: Hello, my name is Alice.
person2.greet(); // Output: Hello, my name is Bob.

In the above example, we create two instances of the Person class: person1 and person2. We pass the names "Alice" and "Bob" to the constructor, respectively. Each instance has its own name property and can call the greet method defined in the class.

Inheritance with ES6 Classes:

ES6 classes also provide a straightforward way to achieve inheritance through the extends keyword. This allows one class to inherit properties and methods from another class, forming a parent-child relationship.

Example:

class Employee extends Person {
  constructor(name, salary) {
    super(name);
    this.salary = salary;
  }

  displaySalary() {
    console.log(`Salary: ${this.salary}`);
  }
}

In the above example, we define a class called Employee that extends the Person class using the extends keyword. It has its own constructor method that takes a name and salary parameter. We use the super keyword within the constructor to call the parent class's constructor and pass the name argument. The Employee class also defines a displaySalary method.

The Employee class inherits the name property and the greet method from the Person class. It adds its own salary property and the displaySalary method.

const employee = new Employee("Alice", 50000);

employee.greet(); // Output: Hello, my name is Alice.
employee.displaySalary(); // Output: Salary: 50000.

In the example, we create an instance of the Employee class, employee, with the name "Alice" and a salary of 50000. It can call both the inherited greet method from the Person class and the displaySalary method defined in the Employee class.

ES6 classes provide a more structured and intuitive syntax for defining and extending objects in JavaScript. They encapsulate data and behavior within a class, making code organization and maintenance easier. Additionally, they promote the principles of object-oriented programming, such as inheritance and encapsulation, leading to more reusable and modular code.

Encapsulation and Data Hiding:

Access modifiers in JavaScript (public, private, protected)

JavaScript does not have built-in access modifiers like public, private, and protected as seen in some other programming languages. However, starting with ECMAScript 2015 (ES6), JavaScript introduced a new feature called "private fields" and "private methods" using a syntax called "Private Fields and Methods." While not exactly the same as traditional access modifiers, private fields and methods provide a way to achieve encapsulation and control access to certain members of an object. Let's explore private fields and methods in JavaScript in detail with examples:

Private Fields:

Private fields are declared using a hash (#) symbol followed by the field name inside a class. These fields can only be accessed within the class itself and are not accessible outside of it.

Example:

class Person {
  #name; // private field

  constructor(name) {
    this.#name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.#name}.`);
  }
}

const person = new Person("Alice");
person.greet(); // Output: Hello, my name is Alice.
console.log(person.#name); // SyntaxError: Private field '#name' must be declared in an enclosing class

In the above example, the #name field is a private field declared within the Person class. It can only be accessed within the class, as demonstrated in the greet method. However, attempting to access person.#name outside of the class results in a SyntaxError because private fields are not accessible from the outside.

Private Methods:

Similar to private fields, private methods are also declared using the hash (#) symbol before the method name. Private methods can only be called within the class where they are defined.

Example:

class Counter {
  #count = 0; // private field

  #increment() {
    this.#count++;
    console.log(`Count: ${this.#count}`);
  }

  incrementTwice() {
    this.#increment();
    this.#increment();
  }
}

const counter = new Counter();
counter.incrementTwice(); // Output: Count: 1
                          //         Count: 2
counter.#increment(); // SyntaxError: Private method '#increment' must be declared in an enclosing class

In the above example, the #increment method is a private method declared within the Counter class. It increments the private #count field and logs the current count. The incrementTwice method, which is a public method, calls the private #increment method. However, attempting to call counter.#increment() from outside the class results in a SyntaxError because private methods are not accessible from the outside.

Private fields and methods help in achieving encapsulation and hiding implementation details within a class. They ensure that certain members are only accessible within the class, providing better control and data protection.

It's important to note that private fields and methods in JavaScript are still a proposal and may not be supported in all environments or older versions of JavaScript. Additionally, they are not strictly enforced access modifiers like in some other languages, but they provide a convention and mechanism for implementing encapsulation and access control in JavaScript.

Encapsulating data:

Encapsulating data and methods is a fundamental concept in object-oriented programming (OOP) that aims to bundle related data and functions together within a class, providing data protection and controlling access to them. Encapsulation helps in achieving better code organization, modularization, and data integrity. Let's explore encapsulation in more detail with an example:

Example:

class BankAccount {
  #accountNumber; // private field
  #balance; // private field

  constructor(accountNumber, initialBalance) {
    this.#accountNumber = accountNumber;
    this.#balance = initialBalance;
  }

  deposit(amount) {
    this.#balance += amount;
  }

  withdraw(amount) {
    if (amount <= this.#balance) {
      this.#balance -= amount;
    } else {
      console.log("Insufficient funds.");
    }
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount("123456789", 1000);
account.deposit(500);
console.log(account.getBalance()); // Output: 1500
account.withdraw(2000); // Output: Insufficient funds.
console.log(account.getBalance()); // Output: 1500
console.log(account.#accountNumber); // SyntaxError: Private field '#accountNumber' must be declared in an enclosing class

In the above example, we have a BankAccount class that encapsulates the account details (#accountNumber) and the balance (#balance). These private fields are not directly accessible from outside the class, providing data protection.

The class provides public methods like deposit, withdraw, and getBalance to interact with the encapsulated data. The deposit method adds the given amount to the balance, while the withdraw method deducts the amount from the balance if sufficient funds are available. The getBalance method returns the current balance.

By encapsulating the data fields as private fields and exposing only the necessary methods, we ensure that the internal state of the BankAccount object remains controlled. Direct access to private fields is restricted to maintain data integrity.

In the example, the #accountNumber private field cannot be accessed using account.#accountNumber outside the class, as it would result in a SyntaxError.

Encapsulation allows us to hide implementation details and provides a clear separation between the internal workings of a class and its public interface. It helps in preventing unauthorized modifications of data, promotes code maintainability and reusability, and enhances the overall robustness of the codebase.

Conclusion

In closing, exploring Object-Oriented Programming (OOP) in JavaScript opens up a world of possibilities for your coding endeavors. By delving into the concepts of classes, objects, inheritance, encapsulation, and more, you'll gain valuable tools to build better, more efficient applications.

Through this blog, we've demystified OOP in JavaScript, breaking down complex concepts into simple, relatable examples. Whether you're a beginner or have some programming experience, OOP is a fundamental paradigm that will take your coding skills to new heights.

By embracing OOP, you'll be able to write code that is modular, reusable, and easier to understand. You'll create objects that encapsulate data and functionality, resulting in cleaner code that is easier to maintain and extend.

As you continue your coding journey, don't be afraid to experiment with OOP principles in JavaScript. Explore the power of classes, inheritance, and encapsulation. Play around with private fields, methods, and closures to achieve data privacy and control.

Remember, OOP is not just about learning syntax and concepts; it's about unlocking your creativity as a developer. By understanding OOP, you'll be able to architect elegant solutions, design efficient code structures, and tackle complex problems with confidence.

So, take a leap into the world of OOP in JavaScript. Embrace the power of objects, classes, and inheritance. Discover the joy of writing clean, organized code that is both functional and beautiful. Happy coding!

Amandeep Singh

Amandeep Singh Narang's Blog

Amandeep Singh Narang's Blog

"Unleashing the Power of Object-Oriented Programming in JavaScript: A Guide to Clean and Scalable Code"

Table of contents

Introduction to OOP Concepts

Objects

Classes

`Class:`

`constructor:`

`new:`

`this:`

Benefits of using OOP's in JavaScript

Prototypes and Prototypal Inheritance:

Prototype Chain

Creating objects using prototypes

Inheriting properties and methods

ES6 Classes and Inheritance:

Class:

Creating Object Instances:

Inheritance with ES6 Classes:

Encapsulation and Data Hiding:

Access modifiers in JavaScript (public, private, protected)

Private Fields:

Private Methods:

Encapsulating data:

Conclusion