Object-Oriented JavaScript

If you are familiar with programming languages like Java. You must already know what Object-Oriented means. And even if you are new to programming, don't worry we will learn all about it in deep. So, sit tight we are about to start the concept of classes and objects.

First, what is actually object-oriented programming?

It is a set of techniques that uses objects for the program organization. Let's learn various object-oriented concepts.

Encapsulation

In simple words, encapsulation is separating interface from implementation. Since programs are divided into smaller pieces which is the core idea of object-oriented programming. They interact with each other through interfaces.

It's a good idea to have that functionality because whenever a code needs some changes it will be local to that piece and its surrounding code. It doesn't affect the whole code. Also, programmers don't have to keep knowledge of the whole program.

At the abstract level, they hide their implementation. The interface consists of methods and properties. Properties that are part of the interface are called public and others called private.

There is no specific way of making any property private in JavaScript but you can use _(underscore) to indicate that a particular property is private.

Methods

Methods are properties that hold function values. You can call any method using the object it is called on.
object.methodName()
It is necessary to put parentheses after methodName otherwise it will give "function definition" as output.

function speak(line)
{
      console.log(`The ${this.type} rabbit says '${line}'`);
}

let whiteRabbit = {type: "white", speak};
whiteRabbit.speak("Burp!");

Now, what "this" is? this keyword refers to the current object. It ensures that correct values are used.

You might be thinking that we can directly write "white rabbit". Why use "this" keyword?
Because it becomes handy when we have several objects created dynamically and all use the same code.

We can also use "this" explicitly using the "call" method.
speak.call(whiteRabbit, "Burp");

This automatically takes the "this" keyword as its first argument and further arguments as normal. Every function has its own "this" binding but in the case of arrow functions, it is different. They do not have their own binding but can see the "this" binding of the scope around them.

function normalize()
{
     console.log(this.coords.map(n => n/this.length));
}

normalize.call({coords: [0, 2, 3], length: 5});

Prototypes

Let's consider an example:

function student()
{
     this.name= "John";
     this.gender= "male";
}

let obj1 = new student();
let obj2 = new student();
obj1.age=15;
console.log(obj1.age);
console.log(obj2.age);

So when we create age property, it is only assigned to the first instance and not the second. What if we want it in all instances in the future. We can do that using prototype.

A prototype is an object that is associated with functions, arrays, and objects by default.

Object.getPrototypeOf(obj) method is used to get access prototype object. Object.prototype provides methods such as hasOwnProperty(), isPrototypeOf() etc. and one of them is toString().

Functions derive from Function prototype and arrays derive from Array prototype.

You can use Object.create to create an object with a specific prototype.

let protoRabbit = {
      speak(line){
           console.log(`The ${this.type} rabbit says '${line}'`);
     }
};

let killerRabbit = Object.create(protoRabbit);
killerRabbit.type="killer";
killerRabbit.speak("SKREEEE!");

-> The killer rabbit says 'SKREEE!'

The "protoRabbit" acts as a container for the properties that are gonna used by all instances. But the individual object has some of its own properties also.

Classes

This is another object-oriented concept. Class defines the shape of an object and that object is called an instance of the class.

Prototypes are useful in sharing methods across all the instances. Instances can have their own property too that must be defined separately in objects themselves.

So how can we create an instance?

By using a constructor. A constructor creates an instance of a class.

function makeRabbit(type)
{
    let rabbit= Object.create(protoRabbit);
    rabbit.type=type;
    return rabbit;
}

If we call a function with a new keyword, it creates the instance of that function with some global properties and some of its own properties which we pass while calling. It creates the object of the right prototype automatically.

function Rabbit(type){
   this.type= type;
}

Rabbit.prototype.speak=function(line){
                console.log(`The ${this.type} rabbit says '${line}'`);
};

let killerRabbit = new Rabbit("killer");

Constructors have the property prototype and it has by default an empty object. You can add new objects. Also, the constructor's name always starts with a capital letter. So then they will be different from other functions.

Class Notation

Class declaration always starts with class keyword where you can define all the methods.

class Rabbit{
    constructor(type){
           this.type=type;
    }

   speak(line){
      console..log(`The ${this.type} rabbit says '${line}'`);
  }
}

let killerRabbit = new Rabbit("killer");

Constructor provides the actual constructor function. You can add the number of methods in a class declaration.

Like functions, a class can also be used in statements and expressions. You are allowed to omit the class name in a class expression.

let object = new class {
      getWord(){
          return "hello";
      }
};

console.log(object.getWord());

That's it for this article. I will cover some more object-oriented concepts in the next article.

TechNik