DEV Community

loading...
Cover image for A short guide to Object creation pattern in JavaScript

A short guide to Object creation pattern in JavaScript

rahxuls profile image Rahul Originally published at rahulism.tech ・2 min read

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

😎Thanks For Reading | Happy Coding😊



Discussion (1)

pic
Editor guide
Collapse
andrewbaisden profile image
Andrew Baisden

Nice you covered some good topics.