This piece introduces the fundamentals of the object-oriented programming paradigm through the lens of JavaScript.

So, get ready. It's time for a paradigm shift.

Enjoy. 🤗

Let's talk about "this"

In JS, this is a keyword that always refers to some object depending on the context in which it is being used, e.g. in a browser console, this looks something like this:

On the other hand, when simply used within a .js file that goes as an input to the node program, this returns an empty object:

console.log(this); // {}

Put a variable in this

In a browser console or in Node REPL, a variable defined using the var keyword gets attached to the object that this points to:

As shown above, the variable's name and value become a key-value pair in this object. However, if a similar piece of code is put in a .js file and compiled using Node, this.g prints undefined, implying that the variable does not bind to any object in that context.

No more plain functions

Consider the following code snippet:

const greet = function(name) {
  console.log(`Hello, ${name}`);
}
greet("Piku"); // Hello, Piku

An object can deliver the same output as the above variable function, as illustrated below:

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

When used in a context like above, this refers to the object itself. In the example, this.name essentially returns the value of the name property in the person object.

Now...

What if we need many such objects? A separate object for every new person. In that case, we are not going to type them one by one, are we? 😅

Prototypes

JavaScript allows us to write Prototype Functions to facilitate dynamic object creation. Let's look at a sample prototype:

function Person(name) {
    this.name = name;
    this.greet = function() {
        console.log(`Hello ${this.name}`);
    }
} 
// It's a convention to use Pascal case for prototype names.

How do we create an object using this prototype? - Instantiate.

Instantiation is a fancy term that refers to the process of object creation using a prototype function. The syntax to dynamically create an object from a prototype:

const person1 = new Person("Piku"); // an instance of Person
person1.greet(); // Hello, Piku

Comments:

person1 is an object, just like the one we wrote in the previous section.
The new keyword is responsible for dynamic memory allocation for an instance or object.

Or you can use a Class

In 2015, the concept of class was added to JS. It’s simply another way to create objects dynamically. The above prototype function can be converted into a class like this:

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log("Hello", this.name);
  }
}

N.B. The instantiation part is the same as that of prototype functions.

Final Remarks

A couple of definitions to clarify the concepts:

A class (or even a prototype function) is a blueprint for an object to be created. It encapsulates code with data to work on that data.
The constructor is a special method that is invoked when a new instance of the class is created. It's job is to initialize the object's properties with the passed arguments.
Objects are instances of classes that represent entities with properties and methods.

Part-2 dropping very soon.

Until then, sayonara 👋

Thank You!

Eww, have some Class dude!

OOP in JavaScript : an Introduction

Table of contents