A short guide to Object creation pattern in JavaScript

#webdev #javascript #programming #codenewbie

Object creation mechanisms increase the flexibility and reuse of existing code. Here in this post, we will see the Object Creation Pattern in JavaScript.

Some patterns to create an object are:

Factory pattern
Constructor pattern
Prototype pattern
Constructor / Prototype pattern

Factory Pattern

The factory pattern uses a function to abstract away the process of creating specific objects and returning their reference. It returns a new instance whenever called.

function createFruit(name) {
    const obj = new Object(); 
    obj.name = name; 
    obj.showName = function () {
        console.log("I'm " + obj.name); 
    }
    return obj; 
}

const fruitOne = createFruit('Apple'); 
const fruitTwo = createFruit('Orange'); 

fruitOne.showName(); // I'm Apple
fruitTwo.showName(); // I'm Orange

Constructor Pattern

In the constructor pattern, instead of returning the instance from the function, we use the new operator along with the function name.

function createFruit(name) {
    this.name = name; 
    this.showName = function () {
        console.log("I'm " + this.name); 
    }
}

const fruitOne = new createFruit('Apple'); 
const fruitTwo = new createFruit('Orange'); 

fruitOne.showName(); // I'm Apple
fruitTwo.showName(); // I'm orage

Prototype Pattern

The prototype pattern adds the properties of the object to the properties that are available and shared among all instances.

function Fruit(name) {
    this.name = none; 
}

Fruit.prototype.showName = function() {
    console.log("I'm " + this.name); 
}

const fruitOne = new Fruit('Apple'); 
fruitOne.showName(); // I'm Apple

const fruitTwo = new Fruit('Orange'); 
fruitTwo.showName(); // I'm Orange

Constructor / Prototype pattern

This is a combination of the constructor and prototype patterns. The constructor pattern defines object properties, while the prototype pattern defines methods and shared properties.

function Fruit() { }

Fruit.prototype.name = name; 
Fruit.prototype.showName = function () {
    console.log("I'm " + this.name); 
}

const fruit = new Fruit(); 
fruit.name = 'Apple'; 
fruit.showName(); // I'm Apple