Object-Oriented Programming In JavaScript

ES6 Classes

Classes in JavaScript do not work as it works in languages like C++ and Java. Classes in JavaScript also implement prototypal inheritance as we did with the constructor function. It is just a "Syntactic Sugar" which makes more sense to programmers coming from languages like C++ and Java.

Syntax

We have two ways of defining classes in JavaScript.

  //<--Class Expression-->
  const Person = class{
      //class body
  }

  //<--Class Declaration-->
  class Person{
      //class body
  }

NOTE:

-> Classes are just a special type of function.

-> Behind-the-scenes classes are still functions.

-> That's why we have class declaration and class expression both.

Constructor

Class Person{
    //The name should be constructor only.
    constructor(firstName, birthYear){
        //instance properties
        this.firstName = firstName;
        this.birthYear = birthYear;
    }
}

Creating Objects

We create objects the same as we did with Constructor Function.

const akash = new Person("Akash", 2003);
const john = new person("John", 2000);

Adding Methods

Methods created outside the constructor will be added to the Person's prototype property (As I have already told you that classes are also functions, which means it will also have prototype property). This means, Here we are also implementing "Prototypal Inheritance".

Class Person{
    //The name should be constructor only.
    constructor(firstName, birthYear){
        //instance properties
        this.firstName = firstName;
        this.birthYear = birthYear;
    }
    //Methods will be added to .prototype property
    calcAge(){
        return 2023 - this.birthYear;
    }
}

const akash = new Person("Akash", 2003);
const john = new person("John", 2000);

cosole.log(akash.firstName); // Akash
console.log(akash.calcAge); // 20

// You can check prototypal inheritance like this,
console.log(akash.__proto__ === Person.prototype); //true
// It means Person class acts just like the Person Constructor Function

Some Important Points About Class

Classes are not hoisted;
Classes are first-class citizens;
Classes are always executed in Strict mode, even if we didn't activate it in our code.

Getters And Setters

Every object(object literals also) in JavaScript can have getters and setters properties. And we call these special properties accessor properties, while the more normal properties are called data properties.

Getters: Getters are used to get the value of any specific object property.
Setters: Setters are used to setting the value of any specific object property.

class Account{
    constructor(owner){
        this.owner = owner;
        this.movements = [373, 435, 343, 200];
    }

    get latestMovement(){
        return this.movements.slice(-1).pop();
    }

    //It takes exactly one argument
    set latestMovement(mov){
        this.movements.push(mov);
    }
}
const akash = new Account("Akash");

// we call getter function just as a normal property
console.log(akash.latestMovement); //200
// we set the value like this
akash.latestMovement = 300;
console.log(akash.latestMovement); //300

Static Methods

Static methods are simply attached directly to the constructor function.
Static methods are not on object prototypes, which means objects can't inherit them.
Static methods can be called only using the constructor function.

//Example

//Here Array is a constructor function for all the array objects;
//And from() method is a static method attached to the Array constructor function.
/Array.from();

Implementing Our Static Method

  //Constructor Function:
  const Person = function(){
      //some code;
  }

  Person.hey = function(){ 
      console.log("Hello Everyone!");
  }
  const akash = new Person();
  akash.hey();// error: akash.hey is not a function
  Person.hey(); // Hello Everyone!

  //ES6 Classes:
  class Person{
      //some code

      //Static method
      static hey(){
          console.log("Hello Everyone")
      }
  }
  const akash = new Person();
  akash.hey(); //error: akash.hey is not a function
  Person.hey(); //Hello Everyone

Object.create()

Object.create() is a third way of implementing "Prototypal Inheritance";
It works way differently from the constructor function and ES6 classes;
Here we explicitly set the prototype of the object;
The Object.create() static method creates a new object, using an existing object as the prototype of the newly created object. MDN;
It is the most straightforward way of implementing Prototypal Inheritance.

const PersonProto = {
    calcAge(){
        return 2023 - this.birthYear;
    }
};

const akash = Object.create(PersonProto);
console.log(akash); // Empty object with prototype PersonProto

//Setting instance properties of akash object
akash.name = "Akash Deep Chitransh";
akash.birthYear = 2003;
console.log(akash.calcAge()); //20

console.log(akash.__proto__ === PersonProto); // true

Object-Oriented Programming In JavaScript - 2

Table of contents