Understanding of this keyword in Javascript

This article is all about understanding and explain the behaviour of the This keyword in the javascript. How and what is the role of the call, apply and bind keyword in javascript.

This

This is a javascript reserved keyword which define the context of the object, scope and body. This behave according to the execution context where you are executing it.

for eg

Browser

In browser, This is a very big and gigantic window object in the browser. which contain lot of object, sub object and function as well

But, I'm concern what happen when we run this and try to console log this inside a runtime environment and outside of the browser.

This in runtime environment

// Example 1
console.log(this)

// Example 2
function somefn(){
    console.log(this)
}
somefn()

// Example 3
let obj = {
    name: "javascript",
    fn(){
        console.log(this)
    }
}

obj.fn()

// Example 4 
function anotherfn(){
    "use strict"
    console.log(this)
}
anotherfn()

Note, In this example I use NodeJs as runtime environment. So, if you are using any other runtime environment some output might be change and vary according to the environment but the meaning of the result always stays same

in first example it log an empty object, in second example it log a global object of Node Js, in third example it log the obj variable and in last example it log undefined due to the strict mode of the javascript.

These example explain lot of things regarding the this keyword in javascript. But, one that you must know about what is the type of the this in javascript.

console.log(typeof this) // object

call, apply and bind in javascript.

whenever you study the behaviour of this you will deal with 3 type Function prototype called call(), apply() and bind().

With the help of the Function prototype we explicitly set the behaviour of this and get more control our the this keyword in javascript.

Call()

The call() method in JavaScript is used to invoke a function with a specified value for this and arguments provided individually. It allows you to execute a function in a specific context, overriding the default value of this inside the function.

Syntax:- fuctionName.call(thisArg, arg1, arg2, ....)

thisArg is the first argument which is used this inside a function. If the function is not in the strict mode. You will get the global object

arg1, arg, ... Argument for the function.

// Example 1
function exampler (system) {
    console.log(`hi, I'm \({this.name} used in \){system}`)
}

let obj_3 = {name: 'rust'}

exampler.call(obj_3, "low level")

// Example 2
function greet() {
  console.log(this.animal, "typically sleep between", this.sleepDuration);
}

const obj = {
  animal: "cats",
  sleepDuration: "12 and 16 hours",
};

greet.call(obj);

Apply()

Apply() in JavaScript allows you to call a function with a specified this value and arguments provided as an array

Syntax:- functionName.apply(thisArg, argsArrays)

thisArg is the first argument which is used this inside a function. If the function is not in the strict mode. You will get the global object

argArrays: An array-like object, specifying the arguments with which func should be called or null or undefined if no arguments should be provided to the function.

// Example 1
const data = [1,2,3,4,5]

function example2(){
    console.log(`\({this.name} \){data}`)
}

let obj_4 = {
    name: "python"
}

example2.apply(obj_4, data)

Bind()

bind() in JavaScript is a method that creates a new function with a permanently set this value and optionally pre-filled arguments. It is used to explicitly control the context (this) in which a function runs, ensuring it always refers to a specific object regardless of how it's called.

Syntax:- functionName.bind(thisArg, arg1, arg2, ...)

thisArg The value to be passed as the this parameter to the target function func when the bound function is called. If the function is not in strict mode, null and undefined will be replaced with the global object, and primitive values will be converted to objects. The value is ignored if the bound function is constructed using the new operator.

arg1, arg2 ... Arguments to prepend to arguments provided to the bound function when invoking func.

Final Word

call(), apply(), and bind() are JavaScript methods that allow you to explicitly set the this value when calling a function, giving you control over function context.

call() invokes a function immediately with a specified this value and individual arguments.
Syntax: function.call(thisArg, arg1, arg2, ...)
apply() invokes a function immediately with a specified this value and arguments provided as an array.
Syntax: function.apply(thisArg, [arg1, arg2, ...])
Useful when you have arguments as an array, such as with Math.min.apply(null, numbers).
bind() does not invoke the function immediately. It returns a new function with the this value and optional arguments permanently bound.
Syntax: function.bind(thisArg, arg1, arg2, ...)
Ideal for creating reusable functions with predefined context, like event handlers: button.addEventListener('click', handler.bind(obj)).