DEV Community

Samrat
Samrat

Posted on • Edited on

Evolution of Making Object in Javascript

A constructor function can be made with or without class. Class was introduced in ES6 to concise the process of making Object. There are different ways to create a universal model to create multiple objects. For instance, if you want to create an Object in traditional way, you have to make a function where you have to make an object which will be returned later and for making extra methods or properties you need to push those methods or properties to the prototype of that constructor function. Class also does the same thing in a very concise way. In class you do not have to push the methods to the prototype of that constructor function. It can be written in the same class you have. In the following examples i have shown the evolution of making objects.

// #1

let person = {};
person.name = "sakib";
person.age = 89;
person.eat = function(){
    console.log(`${person.name} is eating`);        
}
person.sleep = function(){
    console.log(`${person.name} is sleeping`);

}
console.log(person.eat());
// It is hard to make everytime to create a new object with the same properties this way.

Enter fullscreen mode Exit fullscreen mode
// #2

    function Person(name,age){
        let person = {};
        person.name = name;
        person.age = age;

        person.eat = function(){
            console.log(`${person.name} is eating`);        
        }

        person.sleep = function(){
            console.log(`${person.name} is sleeping`);

        }

        return person;
    }

    let sakib = Person("sakib",89);
    let tamim = Person("tamim",78);
    console.log(sakib.eat());

Enter fullscreen mode Exit fullscreen mode
// #3

    let personMethods = {
        eat(){
            console.log(`${person.name} is eating`);        
        },
        sleep(){
            console.log(`${person.name} is sleeping`);  
        }
    };
    function Person(name,age){
        let person = {};
        person.name = name;
        person.age = age;

        person.eat = personMethods.eat();
        person.sleep = personMethods.sleep();

        return person;
    }

    let sakib = Person("sakib",89);
    let tamim = Person("tamim",78);
    console.log(sakib.eat());


Enter fullscreen mode Exit fullscreen mode
// #4

    let personMethods = {
        eat(){
            console.log(`${person.name} is eating`);        
        },
        sleep(){
            console.log(`${person.name} is sleeping`);  
        }
    };
    function Person(name,age){
        let person = Object.create(personMethods);
        person.name = name;
        person.age = age;

        return person;
    }

    let sakib = Person("sakib",89);
    let tamim = Person("tamim",78);
    console.log(sakib.eat());

Enter fullscreen mode Exit fullscreen mode
// #5

    Person.prototype = {
        eat(){
            console.log(`${person.name} is eating`);        
        },
        sleep(){
            console.log(`${person.name} is sleeping`);  
        }
    };
    function Person(name,age){
        let person = Object.create(Person.prototype);
        person.name = name;
        person.age = age;

        return person;
    }

    let sakib = Person("sakib",89);
    let tamim = Person("tamim",78);
    console.log(sakib.eat());

Enter fullscreen mode Exit fullscreen mode
// #6

    function Person(name,age){
        this.name = name;
        this.age = age;
    }

    Person.prototype = {
        eat(){
            return `${this.name} is playing`;        
        },
        sleep(){
            return `${this.name} is sleeping`;  
        }
    }; 

    const sakib = new Person("sakib", 56);
    const tamim = new Person("tamim", 89);
    console.log(sakib.eat());

Enter fullscreen mode Exit fullscreen mode
// #7

    class Person {
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }
        eat() {
            return `${this.name} is playing`;
        }
        sleep() {
            return `${this.name} is sleeping`;
        }
    }


    const sakib = new Person("sakib", 56);
    const tamim = new Person("tamim", 89);
    console.log(sakib.eat());

Enter fullscreen mode Exit fullscreen mode

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More