Evolution of Making Object in Javascript

Samrat — Sat, 03 Feb 2024 18:23:15 +0000

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

Closure in JavaScript

Samrat — Thu, 31 Aug 2023 10:55:03 +0000

Closure is nothing but a technique bringing out the variable to the outer scope so that parent scope can also work with the variable from child scope.

function foo(){
    let count = 0;
    return function(){
        return count+=1;
    }}

let doo = foo();

console.log(doo());
console.log(doo());
console.log(doo());
console.log(count);

Here count variable can be mutated from the outer scope.
But count variable cannot be accessed directly from outside the foo function.

Higher Order function and Callback function in Javascript?

Samrat — Thu, 08 Dec 2022 04:31:12 +0000

Callback function : A function passes as argument into another function is called callback function.
Higher order function : A function which receives a callback function is called higher order function.
Example :

function foo(){
    console.log("Hello World");
}
function abu(e){
    e();
}
abu(foo);

In this example abu() and foo() are higher order function and callback function respectively.

DEV Community: Samrat

Evolution of Making Object in Javascript

Closure in JavaScript

Higher Order function and Callback function in Javascript?