javascript

Javascript: Object Oriented Programming

Object Oriented Programming (OOP) is a way of writing code such that you can create different objects (also called “instances”) from a common blueprint.

Each created instance has properties that are not shared with other instances.

For example if we have an Animal blueprint, we can create other animal instances with different names.

Typically, object oriented programming is about structuring your program such that you have multiple levels of blueprints. This is also referred to as “inheritance” or “subclassing“.

Another aspect of object oriented programming involves a process whereby we hide certain pieces of information so that they are not accessible and cannot be written to. This process is known as “encapsulation“.

For the sake of this tutorial, we shall look at two (2) approaches to objected-oriented programming which are:

  1. Constructor functions.
  2. Class Syntax

Constructor Functions

Constructors are special functions that contain “this” keywords.

“this” lets you store and access unique values created for each instance, and this instance can be created using the “new” keyword.

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

const human = new Human("Lawson", "Luke");

console.log(human.firstName); //Lawson
console.log(human.lastName); //Luke

Class Syntax

Classes, which many have referred to as “syntactic sugar”, are templates for creating objects.

Classes are an alternative of constructor functions and can be defined using the “class” keyword followed by the desired name of the class.

class Human {
}

Constructor Methods in Classes

The constructor method is a special method for creating and initialising an object created with a class.

There can only be just one special method with the name “constructor” in a class, and if more than one occurrence exist, a syntaxError will be thrown.

Class Human {
constructor(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}
}

const human = new Human("Matt" "Hendrick");

console.log(human.firstName); //Matt
console.log(human.lastName); //Hendrick

Hoisting

Hoisting means calling a variable or function before it is declared.

Well, this happens because Javascript has a default behaviour of moving declarations to the top, regardless of where it is declared.

But this is not the same with classes.

You first need to declare your class before you can access it, otherwise a ReferenceError will be thrown.

Conclusion

Object oriented programming is an exciting way of writing code, and it cuts across several programming languages like PHP for instance.

However, you should use this concept sparingly, especially when your codebase is small and not very complex.

Recent Posts

ReferenceError vs. TypeError: What’s the Difference?

When debugging JavaScript, you’ll often encounter ReferenceError and TypeError. While both indicate something went wrong,…

10 hours ago

document.querySelector() vs. getElementById(): Which is Faster?

When selecting DOM elements in JavaScript, two common methods are document.querySelector() and document.getElementById(). But which…

10 hours ago

npm vs. Yarn: Which Package Manager Should You Use in 2025?

When starting a JavaScript project, one of the first decisions you’ll face is: Should I…

3 days ago

Why Learn Software Development? (And Where to Start)

Software development is one of the most valuable skills you can learn. From building websites…

6 days ago

JavaScript Multidimensional Arrays

In JavaScript, arrays are used to store multiple values in a single variable. While JavaScript…

2 weeks ago

What is Containerization

Containerization is a lightweight form of virtualization that packages an application and its dependencies into…

2 weeks ago