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

How to Dynamically Create, Update, and Delete HTML Elements

In modern web development, dynamically manipulating HTML elements is essential for creating interactive and responsive…

4 days ago

Why parseInt(’09’) Returns 0

If you've ever encountered the puzzling behavior of parseInt('09') returning 0 in JavaScript, you're not…

7 days ago

Event Bubbling and Capturing: Why Your Click Listener Fires Twice (And How to Fix It)

If you’ve ever built an interactive web application, you may have encountered a puzzling issue:…

2 weeks ago

Practical Array Methods for Everyday Coding

Arrays are the backbone of programming, used in nearly every application. Whether you're manipulating data,…

2 weeks ago

What the Heck Is the Event Loop? (Explained With Pizza Shop Analogies)

If you've ever tried to learn JavaScript, you’ve probably heard about the "Event Loop"—that mysterious,…

3 weeks ago

Why [] === [] Returns false in JavaScript (And How to Properly Compare Arrays & Objects)

JavaScript can sometimes behave in unexpected ways, especially when comparing arrays and objects. If you've…

3 weeks ago