Day 1: Everything You Need to Know About this in JavaScript

Overview of this

• this refers to the object currently executing a function.
• Its value is determined at runtime based on how the function is called.

1. this in Global Scope

• Non-strict mode: Refers to the global object (window in browsers, global in Node.js).
• Strict mode: Refers to undefined.

Example (featuring Deepak): Deepak writes a function but forgets its context.

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

showThis(); // Non-strict: Window | Strict: undefined        

2. this in Object Methods

• Refers to the object that calls the method.

Example (Deepak and his recipe): Deepak, the chef, refers to his own secret sauce.

const chef = {
  name: 'Deepak Sharma',
  cook() {
    console.log(this.name + ' is cooking!');
  },
};

chef.cook(); // Output: Deepak Sharma is cooking!        

• Losing Context: Deepak hands his recipe to a friend, who gets lost.

const cookFunc = chef.cook;
cookFunc(); // Output: undefined        

• Fix: Deepak binds the recipe back to himself.

const boundCook = chef.cook.bind(chef);
boundCook(); // Output: Deepak Sharma is cooking!        

3. this in Arrow Functions

• Arrow functions inherit this from the surrounding scope.

Example (Deepak's parrot): Deepak’s parrot repeats everything Deepak says.

const parrotOwner = {
  name: 'Deepak Sharma',
  talk() {
    const parrot = () => console.log(this.name + "'s parrot is talking!");
    parrot();
  },
};

parrotOwner.talk(); // Output: Deepak Sharma's parrot is talking!        

4. this in Constructors and Classes

• Refers to the new object being created by the constructor.

Example (Deepak builds robots):

function Robot(name) {
  this.name = name;
}

const wallE = new Robot(Iron-man');
console.log(wallE.name); // Output: Iron man        

• ES6 Classes: Deepak builds spaceships now.

class Spaceship {
  constructor(name) {
    this.name = name;
  }

  launch() {
    console.log(this.name + ' is launching!');
  }
}

const falcon = new Spaceship('Falcon 9');
falcon.launch(); // Output: Falcon 9 is launching!        

5. this in Event Handlers

• Refers to the element that triggered the event.

Example (Deepak presses a button):

document.querySelector('button').addEventListener('click', function () {
  console.log(this); // Refers to the button element
});        

• Arrow Functions: Inherit this from the surrounding scope.

document.querySelector('button').addEventListener('click', () => {
  console.log(this); // Refers to the global object (Window)
});        

• Fix: Use regular functions to keep this as the button element.

6. Common Pitfalls and Fixes

6.1. Losing Context in Callbacks

• When a method is passed as a callback, this often loses its original context.

Example (Deepak’s cat Lilly):

const cat = {
  name: 'Lilly',
  meow() {
    console.log(this.name + ' says Meow!');
  },
};

setTimeout(cat.meow, 1000); // Output: undefined        

• Fix: Deepak binds Lilly’s meow method.

setTimeout(cat.meow.bind(cat), 1000); // Output: Lilly says Meow!        

6.2. this in Closures

• Inner functions lose access to the outer function’s this.

Example (Deepak gets lost in a cave):

const adventurer = {
  name: 'Deepak Sharma',
  explore() {
    function innerEcho() {
      console.log(this.name + ' is lost!');
    }
    innerEcho(); // Output: undefined
  },
};

adventurer.explore();        

• Fix 1: Deepak carries a compass (self).

const adventurer = {
  name: 'Deepak Sharma',
  explore() {
    const self = this;
    function innerEcho() {
      console.log(self.name + ' found the treasure!');
    }
    innerEcho(); // Output: Deepak Sharma found the treasure!
  },
};

adventurer.explore();        

• Fix 2: Use arrow functions.

const adventurer = {
  name: 'Deepak Sharma',
  explore() {
    const innerEcho = () => console.log(this.name + ' found the treasure!');
    innerEcho(); // Output: Deepak Sharma found the treasure!
  },
};

adventurer.explore();        

7. Explicitly Setting this: call, apply, and bind

7.1. call

• Invokes a function and explicitly sets this.

function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

const wizard = { name: 'Deepak the Wise' };
greet.call(wizard, 'Hello'); // Output: Hello, Deepak the Wise        

7.2. apply

• Similar to call, but arguments are passed as an array.

greet.apply(wizard, ['Hi']); // Output: Hi, Deepak the Wise        

7.3. bind

• Creates a new function with this set to a specific object.

const boundGreet = greet.bind(wizard, 'Hey');
boundGreet(); // Output: Hey, Deepak the Wise        

8. Borrowing Methods

• Borrow methods from one object to use in another by explicitly setting this.

Example (Deepak and superhero calculations):

const hero1 = { powers: [100, 200, 300], avgPower: null };
const hero2 = { powers: [50, 75, 125], avgPower: null };

function calculateAvgPower() {
  const sum = this.powers.reduce((a, b) => a + b, 0);
  this.avgPower = sum / this.powers.length;
}

calculateAvgPower.call(hero1);
console.log(hero1.avgPower); // Output: 200

calculateAvgPower.apply(hero2);
console.log(hero2.avgPower); // Output: 83.33        

9. Summary Table

1. Global Scope (non-strict): this refers to the global object (window in browsers or global in Node.js).
2. Global Scope (strict): this is undefined.
3. Object Method: this refers to the object that invoked the method.
4. Regular Function: this depends on the caller (global object in non-strict mode or undefined in strict mode).
5. Arrow Function: this is inherited from the enclosing lexical scope.
6. Constructor Function: this refers to the new instance created by new.
7. Event Handler: this refers to the DOM element that triggered the event.
8. call/apply/bind: this is explicitly set by the method (to a specific object).

The value of this is defined at run-time.

• When a function is declared, it may use this, but that this has no value until the function is called.
• A function can be copied between objects.
• When a function is called in the “method” syntax: object.method(), the value of this during the call is object.

Please note that arrow functions are special: they have no this. When this is accessed inside an arrow function, it is taken from outside.

10. Key Takeaways

1. this depends on how a function is called, not where it is defined.
2. Use bind, call, and apply to control this explicitly.
3. Leverage arrow functions to inherit this from the enclosing scope.

References

1. this - JavaScript | MDN: An in-depth explanation of the this keyword.
2. https://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/
3. https://medium.com/codex/understanding-this-in-javascript-the-complete-guide-c4c21fe15ff8
4. https://javascript.info/object-methods