JavaScript this Operator Interview Questions

In JavaScript, this is a special keyword that refers to the current object or context. It behaves differently depending on where it's used. If you use this in a regular function, it refers to the global object (in browsers, this is the window). In an object's method, this refers to the object itself.

We are going to discuss some Interview Questions related to This keyword.

1. Why this is Necessary in JavaScript?

• To provide access to an object's properties & methods from methods within that object.
• Efficiency via code reuse.
• Enables reusability and flexibility of functions across different objects.
• Supports object-oriented design principles by linking data (properties) with behavior (methods)
• Enables objects to manage their own state and behavior effectively.

2. What is the default value of this in the global context?

console.log(this); // Window (browser) or global object (Node.js)

3. How does this behave inside a simple function?

function show() {
    console.log(this); // Global object or undefined in strict mode
}
show();

<ref *1> Object [global] {
  global: [Circular *1],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Functio...

4. What is the value of this in strict mode?

"use strict";
function test() {
    console.log(this);
}
test();

undefined

5. How does 'this' work in an object method?

const obj = {
    name: "GeeksforGeeks",
    greet() {
        console.log(this.name);
    }
};
obj.greet(); 

GeeksforGeeks

6. How does 'this' work with nested functions?

const obj = {
    name: "GeeksforGeeks",
    greet() {
        function inner() {
            console.log(this);
        }
        inner();
    }
};
obj.greet();

<ref *1> Object [global] {
  global: [Circular *1],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Functio...

• In strict mode, this inside a regular function is undefined because regular functions do not automatically bind this to their enclosing object.
• To fix this, use an arrow function inside greet() as arrow functions inherit this from their outer context, ensuring this refers to obj.

7. How does this behave in an arrow function?

const obj = {
    name: "Geeks",
    greet: () => {
        console.log(this.name); // undefined, as `this` refers to the enclosing scope
    }
};
obj.greet();

undefined

8. What is the value of this inside a class?

class Person {
    constructor(name) {
        this.name = name;
    }
    greet() {
        console.log(this.name); // Refers to the instance of the class
    }
}
const p = new Person("GeeksforGeeks");
p.greet(); // "GeeksforGeeks"

GeeksforGeeks

9. What happens to 'this' in an IIFE?

(function () {
    console.log(this); // Global object or undefined in strict mode
})();

<ref *1> Object [global] {
  global: [Circular *1],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Functio...

The output of the code depends on whether you are running it in strict mode or non-strict mode.

Non-strict mode (default in regular JavaScript): In non-strict mode, when a function is called without an object context (like in your case), this refers to the global object (in the browser, it’s window).

// In a browser:
Window { ... } // Represents the global window object in a browser

Strict mode: In strict mode ('use strict';), this inside a function call refers to undefined instead of the global object.

10. How does 'this' behave in setTimeout?

const obj = {
    name: "GeeksforGeeks",
    greet() {
        setTimeout(function () {
            console.log(this.name); // undefined in strict mode
        }, 1000);
    }
};
obj.greet();

11. How to fix 'this' in setTimeout using arrow functions?

const obj = {
    name: "GeeksforGeeks",
    greet() {
        setTimeout(() => {
            console.log(this.name); // "GeeksforGeeks"
        }, 1000);
    }
};
obj.greet();

In this code:

• When setTimeout is used with an arrow function, this inside the arrow function refers to the outer scope's this, which is the object (obj).
• As a result, the arrow function correctly accesses the name property of obj, and the output will be "GeeksforGeeks".

GeeksforGeeks

12. What is 'this' when a function is bound?

const obj = { name: "GeeksforGeeks" };
function greet() {
    console.log(this.name);
}
const boundGreet = greet.bind(obj);
boundGreet();

GeeksforGeeks

In this code:

• greet() is a regular function where this would normally depend on how it's called.
• greet.bind(obj) creates a new function (boundGreet) where the value of this is permanently set to the object obj.
• When boundGreet() is called, this inside the function refers to obj, so this.name outputs "GeeksforGeeks".

GeeksforGeeks

13. How does 'this' behave in call and apply?

const obj = { name: "GeeksforGeeks" };
function greet() {
    console.log(this.name);
}
greet.call(obj);
greet.apply(obj);

GeeksforGeeks
GeeksforGeeks

In this code:

• This method calls the function immediately and sets this to obj. It then prints "GeeksforGeeks" because this.name refers to o obj.name.
• Like call(), apply() also calls the function immediately and sets this to obj. The difference is that apply() expects arguments to be passed as an array, but in this case, no arguments are needed, so the result is the same: "GeeksforGeeks".

GeeksforGeeks
GeeksforGeeks

14. What happens when "this" is used in a constructor function?

function Person(name) {
    this.name = name;
}
const p = new Person("GeeksforGeeks");
console.log(p.name); 

GeeksforGeeks

In this code

• In a constructor function, this refers to the new object being created during the invocation of the function with the new keyword.
• When new Person("GeeksforGeeks") is called, this.name = name sets the name property of the new object to "GeeksforGeeks". The new object is returned and assigned to p, so p.name outputs "GeeksforGeeks".

15. How does "this" behave in chaining methods?

const obj = {
    count: 0,
    increment() {
        this.count++;
        return this;
    },
    show() {
        console.log(this.count);
        return this;
    }
};
obj.increment().increment().show();

2

In this code

• In this example, obj has two methods: increment and show. The increment method increases the count by 1 and returns the object itself (this), allowing method chaining.
• The show method prints the current count and also returns the object. Calling obj.increment().increment().show() increases count to 2 and prints 2 because the methods are chained together.

16. What is "this" in an ES module?

In an ES module, this is undefined at the top level because ES modules run in strict mode by default

console.log(this); // Undefined in Es modules

17. What is " this " inside the an object returned by the function?

function createObject() {
    return {
        name: "GeeksforGeeks",
        greet() {
            console.log(this.name);
        }
    };
}
const obj = createObject();
obj.greet();

GeeksforGeeks

In this example, the createObject function returns an object with a name property and a greet method. When obj.greet() is called, this refers to the obj itself, so it accesses obj.name and prints "GeeksforGeeks".

18 . How does "this" behave in a factory function when used inside a method of the returned object?

function create(name) {
    return {
        name,
        greet() {
            console.log(this.name);
        }
    };
}
const person = create("GeeksforGeeks");
person.greet();

GeeksforGeeks

In this code

• The createPerson function creates an object with a name property and a greet method.
• When person.greet() is called, this inside the greet method refers to the person object, allowing it to access person.name and print "GeeksforGeeks".

19 . How does "this" behave in a forEach callback?

[1, 2, 3].forEach(function () {
    console.log(this);
}, { name: "GeeksforGeeks" });

{ name: 'GeeksforGeeks' }
{ name: 'GeeksforGeeks' }
{ name: 'GeeksforGeeks' }

In this code

• The forEach method iterates over the array [1, 2, 3], with the second argument { name: "GeeksforGeeks" } explicitly set as this inside the loop.
• During each iteration, this refers to { name: "GeeksforGeeks" }, so the object is printed for every element in the array.

20. How can you pass "this" explicitly in a Promise chain?

const obj = {
    name: "GeeksforGeeks",
    greet() {
        return Promise.resolve(this.name).then(name => {
            console.log(name);
        });
    }
};
obj.greet();

GeeksforGeeks

• In this example, obj.greet() returns a promise that resolves with this.name (which is "GeeksforGeeks").
• Once the promise is resolved, the .then() method prints the value of name, which is "". So, the output is Alice.

20. How does "this" behave with getters and setters?

const obj = {
    name: "Geeks",
    get greet() {
        return `Hello, ${this.name}`;
    },
    set greet(newName) {
        this.name = newName;
    }
};
console.log(obj.greet); // Output: Hello, Geeks
obj.greet = "forGeeks";
console.log(obj.greet); // Output: Hello, forGeeks

Hello, Geeks
Hello, forGeeks

In this example, obj has a getter and setter for the greet property. The getter returns a greeting message with this.name, and the setter updates this.name. Initially, obj.greet prints "Hello, Geeks". After setting obj.greet = "forGeeks", it updates name and prints "Hello, forGeeks".

21. How does " this " behave with async iteration?

const obj = {
    name: "GeeksforGeeks",
    async *greet() {
        yield `Hello, ${this.name}`;
    }
};
(async () => {
    for await (const message of obj.greet()) {
        console.log(message);
    }
})();

Hello, GeeksforGeeks

In this code

• The obj.greet() method is an asynchronous generator that yields a greeting message using this.name.
• The for await...of loop iterates over the yielded values and prints "Hello, GeeksforGeeks" because this.name refers to "GeeksforGeeks".

22. How does "this" behave with Map key iteration in JavaScript?

const map = new Map();
map.set("key1", { name: "Geeks" });
map.set("key2", { name: "forGeeks" });
map.forEach(function (value, key) {
    console.log(this.name);
}, { name: "GeeksforGeeks" });

GeeksforGeeks
GeeksforGeeks

• The map.forEach method iterates through the map, with the second argument { name: "GeeksforGeeks" } being explicitly set as this inside the loop.
• For each item in the map, it prints "GeeksforGeeks" because this.name consistently refers to "GeeksforGeeks".

GeeksforGeeks
GeeksforGeeks

23 .How does "this" behave with async/await in JavaScript?

const obj = {
    name: "GeeksforGeeks",
    async greet() {
        console.log(this.name);
    }
};
obj.greet();

GeeksforGeeks

In this example, obj.greet() is an asynchronous function that logs this.name. Since this refers to the obj object, it prints "GeeksforGeeks", which is the value of obj.name.

GeeksforGeeks

24. What is the value of " this " in an event handler in a DOM element?

const obj = {
    name : "GeeksforGeeks",
    greet() {
        document.getElementById("btn").addEventListener(
            "click", function() {
                console.log(this.name); // Output: undefined
            });
    }
};
obj.greet();

25. How does " this " work with new and constructor functions in JavaScript?

function Animal(name)
{
    this.name = name;
    this.speak = function() {
        console.log(`${this.name} makes a sound`);
    };
}
const dog = new Animal("Dog");
dog.speak();

In this code

• Animal(name): This is a constructor function. It creates a new object with a name property and a speak method.
• dog.speak(): After creating the dog object, we call the speak() method. It prints "Dog makes a sound", because the name property of dog is "Dog".

Dog makes a sound