Object-Oriented Programming(OOP) in JavaScript 101: A Complete Guide

Object-Oriented Programming (OOP) is a programming paradigm that uses objects and their interactions to design applications and computer programs. JavaScript, being a multi-paradigm programming language, supports OOP through its constructor function and prototype-based inheritance.

Constructor function

A constructor function is a special type of function that is used to create and initialize an object. The constructor function is called with the new keyword to create a new object.

function Car(make, model) {
  this.make = make;
  this.model = model;
  this.year = new Date().getFullYear();
}

let myCar = new Car("Toyota", "Camry");
console.log(myCar); // { make: "Toyota", model: "Camry", year: 2020 }

In the example above, we have created a constructor function called Car, which takes in two parameters make and model. The this keyword is used to create properties on the object that is being constructed. In this case, make, model and year are properties of the object.

When we use the new keyword to create a new object, JavaScript creates a new object and sets the this keyword inside the constructor function to point to this new object. Then the constructor function is called, creating the properties make, model and year on the new object.

Prototype

A prototype is an object that is shared among all instances of a constructor function. It is used to add properties and methods to all objects created by a constructor function.

Car.prototype.start = function() {
  console.log("The car is starting");
};

myCar.start(); // The car is starting

In the example above, we have added a method called start to the prototype of the Car constructor function. This means that all objects created by the Car constructor function will have access to this method.

Notice that we are adding the start method to the prototype of the constructor function, not to the object instance. This is because the prototype is shared among all instances, so if we add a property or method to the prototype, it will be accessible on all instances of the constructor function.

Inheritance

JavaScript uses prototype-based inheritance, which means that an object can inherit properties and methods from its prototype.

function ElectricCar(make, model) {
  Car.call(this, make, model);
}

ElectricCar.prototype = Object.create(Car.prototype);
ElectricCar.prototype.constructor = ElectricCar;

let myElectricCar = new ElectricCar("Tesla", "Model S");
console.log(myElectricCar); // { make: "Tesla", model: "Model S", year: 2020 }
console.log(myElectricCar instanceof ElectricCar); // true
console.log(myElectricCar instanceof Car); // true

In the example above, we have created a new constructor function called ElectricCar which inherits from the Car constructor function. We accomplish this by using the Object.create() method to create a new object with the Car.prototype as its prototype. Then we set the prototype of the ElectricCar constructor function to this new object.

Additionally, we need to set the constructor property of the ElectricCar prototype to the ElectricCar constructor function, because the Object.create() method creates an object without a constructor property.

Now when we create a new instance of the ElectricCar constructor function, it inherits all properties and methods from the Car prototype, including the start method we added earlier.

In addition to this, we can check the type of the object using the instanceof operator. This will check if the object is an instance of the given constructor function, and in this case, it will return true for both ElectricCar and Car.

Encapsulation

Encapsulation is the technique of hiding the internal state and behavior of an object and exposing a public interface. In JavaScript, this can be achieved by using closures and the this keyword.

function BankAccount(balance) {
  let _balance = balance;

  this.getBalance = function() {
    return _balance;
  };

  this.deposit = function(amount) {
    _balance += amount;
  };

  this.withdraw = function(amount) {
    if (_balance >= amount) {
      _balance -= amount;
    } else {
      console.log("Insufficient funds");
    }
  };
}

let account = new BankAccount(1000);
console.log(account.getBalance()); // 1000
account.deposit(500);
console.log(account.getBalance()); // 1500
account.withdraw(2000); // Insufficient funds

In this example, we have created a BankAccount constructor function, which takes in an initial balance as a parameter. We are using closure to keep the _balance variable private and not accessible from the outside.

Notice that we are returning functions as the getter and setter methods, this way they will have access to the private variable. This allows the developer to control how the internal state of the object is accessed and modified, which helps to maintain the integrity of the object's state.

In this way, we have created a public interface for the BankAccount object, which allows the user to check the balance, deposit money and withdraw money, but the internal state of the object is hidden from the user.

Classes

ECMAScript 6 introduced the class keyword, which provides a more familiar syntax for creating objects and implementing inheritance in JavaScript. A class is a blueprint for an object, and an object is an instance of a class.

For example, let's convert the Car constructor function from earlier into a class:

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  start() {
    console.log("The car is starting");
  }
}

We can create an object with the Car class using the new keyword, just like with a constructor function:

let myCar = new Car("Toyota", "Camry");

And we can also create a class that inherits from another class using the extends keyword:

class ElectricCar extends Car {
  constructor(make, model) {
    super(make, model);
  }
}

Error Handling

Error handling is the process of dealing with errors that occur during the execution of a program. JavaScript provides the try and catch statements for handling errors. The try block contains the code that might throw an error, and the catch block contains the code that will handle the error.

For example, let's say we have a function that might throw an error:

function divide(a, b) {
  if (b === 0) {
    throw new Error("Cannot divide by zero");
  }
  return a / b;
}

We can use a try and catch block to handle the error:

try {
  let result = divide(10, 0);
  console.log(result);
} catch (error) {
  console.log(error.message); // Cannot divide by zero
}

In this example, if the error is thrown, the program will jump to the catch block and execute the code inside it, in this case, it will print the error message.

It's also possible to use a finally block, which will execute code regardless of whether an error is thrown or not.

Promises, Async & Await

JavaScript provides a way to handle asynchronous code through the use of promises, async functions, and the await keyword.

A promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Promises have a then method, which allows us to register callbacks to be called when the promise is fulfilled (resolved), and a catch method, which allows us to register callbacks to be called when the promise is rejected.

For example:

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hello World");
  }, 1000);
});

promise.then(result => {
  console.log(result); // Hello World
}).catch(error => {
  console.log(error);
});

Async functions are a way to write asynchronous code that looks and behaves like synchronous code. Async functions return a promise, and we can use the await keyword inside an async function to wait for a promise to resolve.

For example:

async function getData() {
  let result = await fetch("https://api.example.com");
  let json = await result.json();
  console.log(json);
}

In this example, the await keyword is used to wait for the fetch request to complete and the json method to complete, before moving on to the next line.

Generators

Generators are a special type of function in JavaScript that allows us to generate a sequence of values over time. They are defined using the function* syntax, and we can use the yield keyword to return a value from the generator.

For example:

function* count() {
  for (let i = 1; i <= 10; i++) {
    yield i;
  }
}

let counter = count();
console.log(counter.next().value); // 1
console.log(counter.next().value); // 2
console.log(counter.next().value); // 3

In this example, we are using the next method to move to the next value in the generator, and the value property to access the current value.

Miscellaneous

There are many other concepts and features in JavaScript that are important to understand and master, such as the event loop, hoisting, closures, and the module system.

Event loop is the mechanism that JavaScript uses to handle asynchronous code execution. It allows the execution of code to be delayed until other code has completed execution.

Hoisting is the behavior in which variable and function declarations are moved to the top of their scope. This means that variable and function declarations are accessible before they are actually defined in the code.

Closures are a powerful feature of JavaScript that allows for data privacy and encapsulation. A closure is a function that has access to variables in its parent scope even after the parent function has returned.

Modules are a way to organize and reuse code in JavaScript. ECMAScript 6 introduced the import and export keywords for creating and using modules. Modules help to keep the global scope clean and make the code more maintainable.

Understanding these concepts and features will help you to write more efficient and effective code in JavaScript. It's important to practice and continue learning about these and other concepts in JavaScript to become a proficient JavaScript developer.

Conclusion

This is a basic tutorial for OOP in JavaScript, but it's important to continue practicing and learning about OOP since javascript has a lot of nuances and ways to implement OOP, and also to explore other concepts related to javascript like scope, closures, and more.

Also, you should note that this is one way of implementing OOP in javascript, there are other methods like using classes and the class keyword, which was introduced in ECMAScript 6, this provides a cleaner and more familiar syntax for class-based OOP.

I'd love to connect with you via Twitter & LinkedIn

Happy hacking!