A Basic Guide to Object-Oriented Programming (OOP) patterns in JavaScript
By: Ayush Verma
Tags: JavaScript, Web Development, Programming, ES6, Software Development

console.log(jonas.__proto__);

//{ species: "Homo sapiens", calcAge: f, constructor: f} console.log(jonas.__proto__.__proto__);

//{ constructor: f, _defineGetter_: f, _defineSetter_: f, hasOwnProperty: f, ....} console.log(jonas.__proto__.__proto__.___proto__);

//null console.dir(Person.prototype.constructor);

//constructor property points back at person const arr = [1,2,3,4,5];

console.log(arr.__proto__); //contains all the built-in array methods

console.log(arr.__proto__ === Array.prototype); //true console.log(arr.__proto__.__proto__); //all object properties

console.log(arr.__proto__.__proto__.__proto__); //null const h1 = document.querySelector("h1");

console.dir(h1); //object

console.log(x=> x*2); //object

We can add new methods to this prototype and all the arrays will then inherit it.

Array.prototype.unique = function() {

return [...new Set(this)];

}; let arr = [1,2,3,2,1,4,5];

console.log(arr.unique()) // [1,2,3,4,5]

ES6 Classes

Classes in JavaScript do not work like traditional classes in other languages like Java or C++ instead, classes in JavaScript are just syntactic sugar of Constructor Functions. They still implement prototypal inheritance behind the scenes, but the syntax makes more sense to people coming from other programming languages. And that was basically the goal of adding classes to JavaScript.

Some important points to note for classes:

Classes are not hoisted even if they are class declarations.

even if they are class declarations. Just like functions classes are also first-class citizens, which means that we can pass them into functions and also return them from functions. That is because classes are really just a special kind of function behind the scenes.

which means that we can pass them into functions and also return them from functions. That is because classes are really just a special kind of function behind the scenes. The body of a class is always executed in strict mode. Classes are executed in strict mode even if we didn’t activate it for our entire script, all the code that is in the class will be executed in strict mode.

Constructor functions are not like old or deprecated syntax. It's 100% fine to keep using them. This is more a question of personal preference.

Setters and Getters

Every object in JavaScript can have setter and getter properties. And we call these special properties assessor properties, while the more normal properties are called data properties. Getters and setters are basically functions that get and set a value.

For objects: const account = {

owner: 'Ayush',

movements: [100,50, 300, 40],



// read something as a property

get latest(){

return this.movements.slice(-1).pop();

},



set latest(mov){

this.movements.push(mov);

}

} console.log(account.latest); //40

account.set = 60;

console.log(account.movements); //[100, 50, 300, 40]

Classes do also have getters and setters, and they do indeed work in the exact same way. Getter is indeed just like any other regular method that we set on the prototype. Setters and getters can actually be very useful for data validation.

For classes: class PersonCl{

constructor(firstName, birthYear){

this.firstName = firstName;

this.birthYear = birthYear;

}



// Method will be added to .prototype property

get age (){

return 2020 - this.birthYear;

}

} const ayush = new PersonCl('Ayush','1992');

console.log(ayush.age); //28

Static Methods

Now a good example to actually understand the static method is the built-in Array.from() method. The Array.from() method converts any array-like structure to a real array.

Array.from(document.querySelectorAll('h1'));

//[h1]

This from() method here is really a method that is attached to the Array constructor. So we could not use the from method on an Array because this from method is not attached to the prototype property of the constructor. Therefore all the arrays do not inherit this method.

[1,2,3].from();

//Uncaught TypeError: [1,2,3].from is not a function

Another static method is Number.parseFloat() and it's static on the Number constructor. So it's not available on numbers, but only on this very constructor.

Number.parseFloat(12);

//12

These are some good examples that we understand what a static method is. And we usually use these kinds of helpers, that should be related to a certain constructor. Now let’s do that for both or constructor function and also for the class.

Object.create()

The third way is to use a function called Object.create() , which works in a pretty different way than constructor functions and classes work. Now, with Object.create() , there is still the idea of prototypal inheritance. However, there are no prototype properties involved. Nor any constructor functions or the new operator. So instead, we can use Object.create() to essentially manually set the prototype of an object to any other object that we want.