DEV Community

Samrat
Samrat

Posted on • Updated 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

Top comments (0)