intro

What is "this" keyword in javascript

• The value of "this" in JavaScript depends on how a function is invoked (runtime binding), not how it is defined.

1. "This" references the object that is currently calling the function
2. "This" refers to the current execution context.
3. "This" value behave different in "strict mode".
4. "This" in arrow function will always from parent scope (execution context)

In non-strict mode

In non-strict mode, a special process called "this substitution" ensures that the value of this is always an object. This means:

• If a function is called with this set to undefined or null, this gets substituted with globalThis.
• If the function is called with this set to a primitive value, this gets substituted with the primitive value's wrapper object.

In JavaScript, you can call a function in the following ways:

1. Function invocation (normal function expression)
2. Method invocation (inside object)
3. Constructor invocation (with new keyword)
4. Indirect invocation (call, apply, bind)

Each function invocation (function calling) defines its own context. Therefore, the this behaves differently

1 Function invocation ( normal function expression )

function abc() {
  console.log(this);
}
abc(); // this belongs to global
window.abc(); // this belongs to global

"use strict";
function abc() {
  console.log(this);
}
abc(); // this will give undefined
window.abc(); // this belongs to global

2 Method invocation (inside object)

let car = {
  brand: "Honda",
  a: function () {
    console.log(this.brand); // this belongs to car

    function abc() {
      console.log("abc", this); // this belongs to window
      function pqr() {
        console.log("pqr", this); // this belongs to window
      }
      pqr();
    }
    abc();
  },
};

console.log(car.a());

2. // with arrow function different cases

"use strict";
let car = {
  brand: "Honda",
  a: function () {
    // console.log(this.brand);
    console.log(this);
    // this belongs to car

    function abc() {
      console.log("abc", this);
      // this belongs to "window" in non strict mode and  "undefined" in strict mode
      function pqr() {
        console.log("pqr", this);
        // this belongs to "window" in non strict mode and  "undefined" in strict mode
      }
      pqr();
    }
    abc();
    // "This" because new execution context is creating
    // abc.call(this);// this will chnage the this to car

    const arrowF = () => {
      console.log("arrowF", this);
      // this belongs to car
      function normalFucntionInSideArrowFunction() {
        console.log("normalFucntionInSideArrowFunction", this);

        const arrowFunInsideNormalFuc = () => {
          console.log("arrowFunInsideNormalFuc", this);
        };
        arrowFunInsideNormalFuc();
      }
      normalFucntionInSideArrowFunction();
    };
    arrowF();
    // arrowFucntion takes this from parent execution context
  },
};

console.log(car.a());
// let u = car.a;
// console.log(u());

3 Constructor invocation (with new keyword)

when we invoked function with new keword js will do these things mainly

• 1: It creates a new empty object .
• 2: set "this" to this empty object.
• 3: By default, the function returns the newly created object (unless it explicitly returns something else)

function ExampleConstructor() {
  console.log(this); // ExampleConstructor{}
}

new ExampleConstructor(); //  'this' refers to the new instance

function anotherFunction() {
  console.log(this);
}

4. Indirect invocation (call, apply, bind)

1

function anotherFunction() {
  console.log(this);
}

anotherFunction.call({}); // will print {}
anotherFunction.call(); // will print window

2

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

anotherFunction.call({}); // will print {}
anotherFunction.call(); // will print undefined

3

"use strict";
let anotherFunction = () => {
  console.log(this);
};

anotherFunction.call();

Question on "This"

Here are some questions specifically focusing on the this keyword in JavaScript:

1. What does the this keyword refer to in JavaScript?

   • Explain the concept and context of this in JavaScript.

2. How is the value of this determined in different contexts?

   • Describe how this behaves in global scope, inside functions, inside objects, and in event handlers.

3. What is the difference between regular functions and arrow functions regarding this?

   • Explain how arrow functions handle the this keyword differently from regular functions.

4. How does call, apply, and bind affect the value of this?

   • Describe how these methods can be used to explicitly set the value of this in a function call.

5. Can you explain an example where the value of this changes dynamically?

   • Provide an example scenario or code snippet where the value of this changes based on how a function is called or where it's defined.

6. What is the value of this in a constructor function?

   • Explain the role of this in constructor functions and how it refers to the newly created object instance.

7. How does this work in object methods?

   • Discuss how this is used within methods of an object and how it refers to the object itself.

8. How do you ensure the correct value of this in nested functions?

   • Describe strategies or techniques to maintain the correct value of this in nested function calls, especially in event handlers or callback functions.

9. What happens to the value of this in arrow functions declared within an object method?

   • Explain how arrow functions handle this when declared within an object method compared to regular functions.

10. Can you explain a scenario where understanding this was crucial in resolving a problem?

    • Provide an example from your experience where understanding the behavior of this was essential in solving a programming challenge or debugging an issue.
    • ans: in class component, with function binding

Coding Question on "This"

1. Implement custom call method
2. Implement custom apply method
3. Implement custom bind method

output based question

const a = {
  arrow: () => {
    console.log("arrow", this);
  },
  normal: function () {
    console.log("normal", this);
  },
};
a.arrow(); // window
a.normal(); // a