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.

// #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());

// #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());

// #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());

// #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());

// #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());

// #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());

Blog

Evolution of Making Object in Javascript

Samrat

Join Our Newsletter. No Spam, Only the good stuff.

Related