Class Patterns in JavaScript (objects blueprint)

Before going to class patterns, let’s see how functions are defined and used in javascript.

Function Declarations and Expressions are the ways to define functions for objects in JavaScript. The main different between these is hoisting. Declarations are function hoisted whereas Expressions are variable hoisted.

It is completely depends on developers and use cases to choose the function definition patterns.

Function Declaration vs Expression

Function declaration can be used or invoked even before its definition but function expression can be invoked only after its definition. it is bubbled up as a variable with undefined value.

let’s move on to class patterns…

JavaScript programmers can define a class even without using class key word!!! we have few patterns to define and use the OOPS class concepts.

1. Factory Function Pattern
2. Constructor Functional Pattern
3. Prototype-based Pattern
4. using class keyword

Factory Function Pattern:-

In this pattern objects can be created without using new Keyword. it is same as Constructor Functional Pattern but the difference is functions explicitly return the JavaScript object, so no need to create objects by using new keyword. whatever variables and methods added to returned objects those are public, if it not added on return object then they are private to the class.

Factory Pattern

Constructor Functional Pattern:-

In this Pattern new keyword is used to create objects.

Functional Class Pattern

variables and methods inside functions will not be accessible unless until you add them to this keyword. this keyword is deciding whether variables and methods inside a class is private or public. this is used to hide the implementation from outside world.

Functional Class Pattern with private and public content

In above example variables name, city and method getDetails are public because it is assigned to this keyword, variable area, age and method checkAge are private because it is not assigned to this keyword. this and new keywords are heart of this pattern.

Prototype-based Pattern:-

The Prototype Pattern creates new objects, but rather than creating non-initialised objects it returns objects that are initialised with values it copied from a prototype object. The Prototype pattern is also referred to as the Properties pattern. variables are added to this keyword, it will be accessible by methods using this keyword.

Methods are stored in class.prototype property.

Prototype-based Pattern

class keyword:-

The class keyword is used to define class declaration and expression. The main difference between function declarations are hoisted whereas class declarations are not hoisted. so you have use after defining the class.

constructor is used to create and initialize the objects. there should be only one constructor per class definition.

class Pattern

Please feel free to comment your suggestions.

Thanks!!!

Reference:-

JavaScript