Javascript: Concept of OOP in ES5 vs ES6

#javascript #programming #opensource

Javascript is originally a functional programming language. Not until ES5 was the concept OOP introduced to Javascript.

Object Oriented Programming (OOP) is the concept of liking programming to real life. This is the process of giving objects in programming the characteristics of objects in reality. E.g In reality, objects like ‘car’ have attributes like color, number of doors, number of wheel drives etc and perform some actions like start, speed, stop etc.

The replication of such characteristics of a car can be done in programming via OOP. In object oriented programming those attributes are called properties while the actions are called methods.

Ways to Create Objects in Javascript

Objects can be created using the constructor functions with prototype in ES5 and using classes in ES6.

In ES5, Object Oriented Programming (OOP) is done by creating objects using the Constructor function. Let’s say you want a Person object, you create a constructor function and pass in the properties you want to set as arguments/parameters. After passing them in, we set them to properties of the object using the ‘this’ keyword. See code snippet below.

function Person(firstName, lastName, dateOfBirth){
    this.firstName = firstName;
    this.lastName = lastName;
    this.dateOfBirth = new Date(dateOfBirth);

We then instantiate the object with the constructor function as shown below.

const person1 = new Person(‘Busari’, ‘Ridwan’, ’14-09-1998’);

The code above created the person1 object. When you console.log(person1); you should get an object.


console.log(person1);

// Outputs result to the console

Notice the dateOfBirth was displayed as an object and not as a string, this is because, we passed it to the Date object so we can use the Date methods to get the Birth Year, Birth Month and Day which you will see below.

const person2 = new Person(‘Sari’, Wan’, ’24-07-2004’);

console.log(person2.dateOfBirth.getFullYear());

// We get 2004

Now, let’s add methods which are basically functions to our Person object.

There are two ways to do this in ES5. We can either add the methods directly inside our Person object or outside using the .prototype. You will see the implementation below as you read on.

Adding the methods directly into the object in ES5


function Person(firstname, lastname, dob){
    this.firstName = firstname;
    this.lastName = lastname;
    this.dateOfBirth = new Date(dob);

    this.getBirthYear = function() {
        return this.dateOfBirth.getFullYear(); 
// the getFullYear() is a method of the Date object.
    }

    this.getFullName = () => `${this.firstName} ${this.lastName}`;

// I used template literal and arrow function above. 

}

Now let’s call our method - getBirthYear and log it to the console.

console.log(person1.getBirthYear()); // logs the birth year
console.log(person1.getFullName());  // logs the full name

Now let’s talk about the prototypes. This is actually the better way to create object methods in ES5.

function Person(firstname, lastname, dob){
    this.firstName = firstname;
    this.lastName = lastname;
    this.dateOfBirth = new Date(dob);
}

Person.prototype.getBirthYear = function() {
    return this.dateOfBirth.getFullYear();
}

Let’s do the same with the getFullName method.


Person.prototype.getBirthYear = () => `${this.firstName} ${this.lastName}`;

Let’s log the newly created methods


console.log(person2.getFullName());

That’s it for object oriented programming in Javascript ES5

Let’s now dive into Object Oriented Programming in ES6 also called ES2015.

How to Create Object in Javascript ES6 Using class keyword

We use classes to create objects in ES6. This does the same thing as the constructor function of ES5 and its prototype, but it’s just a prettier way to write it.

Let’s create our Person class with a constructor/method which takes the arguments and assign it to it’s properties.


class Person {
    constructor(firstName, lastName, dob ){
        this.lastName = lastName;
        this.firstName = firstName;
        this.dob = dob; 
// I have deliberately changed dateOfBirth to dob for ease of writing
    }

// Now let’s create our prototypes or methods.
    getBirthYear(){
        return this.dob.getFullYear();
    }

    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

Now, let’s instantiate our newly created object.


const person1 = new Person(‘You’, ‘Me’, ’05-11-2022’);

console.log(person1.getBirthYear());  // 2022
console.log(person1.getFullName());   // Busari Ridwan

The code is doing same thing as the constructor function of ES5 and as you can see, it’s a shorter, easier and cleaner way to create an object Person.

See you next time...

Here are my social media handles for possible connections:
Twitter
LinkedIn