Function, Method and Constructor call in JavaScript

Understand the different usage of function in JavaScript

In other object oriented programming languages Function, Method and Constructor call may be different things but in JavaScript these are just different usage pattern of one programming construct — Function.

Function

function sayHello(){
    return 'Hello World!';
}
console.log(sayHello()); // logs: Hello World!
let getSquare = (value) => value * value;
console.log(getSquare(10)); // logs: 100

Function sayHello and getSquare work as expected. This usage is same as in others programming languages

Method

Function defined in object is known as method.

let obj = {
    name: 'John',
    sayHello: function(){
       return `Hello ${this.name}`
    }
}
console.log(obj.sayHello()); logs: Hello John

In JavaScript method is nothing but property which just happened to be called.
Like other properties we can assign and reassign the different function in sayHello property.

function greet(){
    return `Welcome ${this.name}`;
}
obj.sayHello = greet
console.log(obj.sayHello()); // logs: Welcome John

Significance of this keyword

let obj = {
    name: 'John',
    sayHello: function(){
       return `Hello ${this.name}`
    }
}
let obj2 = {
    name: 'Wick',
    greet: obj.sayHello
}
console.log(obj2.greet()) // logs: Hello Wick

sayHello method is referring to this . One may thinks that while defining sayhello method this would have bind to obj but this is not the case otherwise the method greet would have logged ‘Hello John’ instead of ‘Hello Wick’.

The value of this depends on caller expression.
when we called obj2.greet caller object was obj2 so this gets bind to obj2 and when we called obj.sayhello because here calling object was obj, this gets bind to object obj.

Let’s take one more example to understand this.

function sayHello(){
    return `Hello ${this.name}`
}
console.log(sayHello()) // logs: Hello undefined

Here sayHello() logged ‘Hello undefined’ because sayHello is using this and while calling sayHello we have not provided any object so it will, by default refer to globalThis object and because globalThis does not have any name property, it logs ‘Hello undefined’ (when JavaScript has no value to produce it just return undefined).

Now try above example after adding name property to globalThis object.

function sayHello(){
    return `Hello ${this.name}`
}
globalThis.name = 'John Wick'
console.log(sayHello()) // logs: Hello John Wick

As globalThis has name property now ,it logs‘John Wick’.

Constructor call

function Employee(name,empId){
    this.name = name;
    this.empId = empId
}
let emp = new Employee('John',12);
console.log(emp); //logs: Employee { name: 'John', empId: 12 }

In above code, Employee function is defined which takes two argument,
calling this function with new keyword will result in creating new object with name and empId fields.
The main usage of constructor function is to create objects.

Conclusion

In this article we have seen three different usage of JavaScript function and how to treat them as a first class objects.

Good Luck, Happy Coding. 😃