Thiskeyword in Javascript

Learn about thiskeyword in javascript with practical examples and code snippets.

Global Context

In strict mode.

Code

console.log(this); // Window object (in browser) or global object (in Node.js)
function globalFunction() {
  console.log(this); // Window/global object (non-strict mode)
}
globalFunction();
"use strict";
function strictFunction() {
  console.log(this); // undefined
}
strictFunction();

Object Method

'this' refers to 'person' object.

Code

const person = {
  name: "Kuldeep",
  age: 25,
  greet: function() {
    console.log(`Hello, I'm ${this.name}`);
  }
};
person.greet(); // "Hello, I'm Kuldeep"

'this' in Nested Functions

Solution: Use arrow function.

Code

const person2 = {
  name: "Kuldeep",
  age: 25,
  greet: function() {
    console.log(`Hello, I'm ${this.name}`);
    function innerFunction() {
      console.log(`Inner: ${this.name}`); // undefined (this is global/window)
    }
    innerFunction();
    const innerArrow = () => {
      console.log(`Inner Arrow: ${this.name}`); // "Kuldeep"
    };
    innerArrow();
  }
};
person2.greet();

Arrow Functions (Lexical 'this')

Arrow function 'this' is bound at definition time.

Code

const person3 = {
  name: "Kuldeep",
  age: 25,
  greet: function() {
    console.log(this.name); // "Kuldeep"
  },
  greetArrow: () => {
    console.log(this.name); // undefined (this is from outer scope)
  }
};
person3.greet(); // "Kuldeep"
person3.greetArrow(); // undefined
const person4 = {
  name: "Kuldeep",
  regularMethod: function() {
    setTimeout(function() {
      console.log(this.name); // undefined (this is window/global)
    }, 100);
  },
  arrowMethod: function() {
    setTimeout(() => {
      console.log(this.name); // "Kuldeep" (this is person4)
    }, 100);
  }
};
person4.regularMethod();
person4.arrowMethod();

call() - Explicit 'this' Binding

Code

function introduce(location) {
  console.log(`I'm ${this.name}, ${this.age} years old, from ${location}`);
}
const person5 = { name: "Kuldeep", age: 25 };
const person6 = { name: "Ramesh", age: 30 };
introduce.call(person5, "Mumbai"); // "I'm Kuldeep, 25 years old, from Mumbai"
introduce.call(person6, "Delhi"); // "I'm Ramesh, 30 years old, from Delhi"

apply() - Similar to call() but takes array

Code

function introduce2(location, country) {
  console.log(`I'm ${this.name}, from ${location}, ${country}`);
}
introduce2.apply(person5, ["Mumbai", "India"]);
introduce2.apply(person6, ["Delhi", "India"]);

bind() - Creates new function with bound 'this'

bind() with partial arguments.

Code

const introduceKuldeep = introduce.bind(person5);
introduceKuldeep("Mumbai"); // "I'm Kuldeep, 25 years old, from Mumbai"
const introduceRamesh = introduce.bind(person6);
introduceRamesh("Delhi"); // "I'm Ramesh, 30 years old, from Delhi"
const introduceFromMumbai = introduce.bind(person5, "Mumbai");
introduceFromMumbai(); // "I'm Kuldeep, 25 years old, from Mumbai"

'this' in Constructor Functions

Code

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`Hello, I'm ${this.name}`);
  };
}
const person7 = new Person("Kuldeep", 25);
person7.greet(); // "Hello, I'm Kuldeep"

'this' in Class Methods

Code

class PersonClass {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
  greetArrow = () => {
    console.log(`Arrow: I'm ${this.name}`);
  }
}
const person8 = new PersonClass("Kuldeep", 25);
person8.greet(); // "Hello, I'm Kuldeep"
person8.greetArrow(); // "Arrow: I'm Kuldeep"

'this' in Event Handlers

When passed as callback, 'this' might be lost Solution: Use bind() Common Interview Questions Q1: What will be the output.

Q2: What will be the output.

Q3: What will be the output.

Code

const button = {
  text: "Click me",
  click: function() {
    console.log(this.text); // "Click me"
  }
};
button.click(); // "Click me"
const clickHandler = button.click;
clickHandler(); // undefined (this is global/window)
const boundClick = button.click.bind(button);
boundClick(); // "Click me"
const obj = {
  name: "Kuldeep",
  getName: function() {
    return this.name;
  },
  getNameArrow: () => {
    return this.name;
  }
};
console.log(obj.getName()); // "Kuldeep"
console.log(obj.getNameArrow()); // undefined
const obj2 = {
  name: "Kuldeep",
  getName: function() {
    const inner = function() {
      return this.name;
    };
    return inner();
  }
};
console.log(obj2.getName()); // undefined
const obj3 = {
  name: "Kuldeep",
  getName: function() {
    const inner = () => {
      return this.name;
    };
    return inner();
  }
};
console.log(obj3.getName()); // "Kuldeep"
function Person(name) {
  this.name = name;
}
Person.prototype.getName = function() {
  return this.name;
};
const person9 = new Person("Kuldeep");
console.log(person9.getName()); // "Kuldeep"
const getName = person9.getName;
console.log(getName()); // undefined
const boundGetName = person9.getName.bind(person9);
console.log(boundGetName()); // "Kuldeep"

---

Summary

Understanding thiskeyword is essential for mastering javascript. Practice these examples and experiment with variations to deepen your understanding.

Key Takeaways

• thiskeyword is a fundamental concept in javascript
• Practice with these examples to build confidence
• Experiment with variations to explore edge cases
• Understanding thiskeyword will help you in technical interviews