Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/javascript-this-operator-interview-questions/ below:

JavaScript this Operator Interview Questions

Last Updated : 04 Jan, 2025

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.

• 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.

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

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...

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

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

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.

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

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"

(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.

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

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".

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

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".

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

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

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".

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

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.

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

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

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".

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

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".

[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.

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

• 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.

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".

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".

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

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

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.

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

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".

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4