// In method: refers to the object
// In constructor: refers to the new instance
// In arrow function: inherited from outer scope
// In event handler: refers to the element

Deep Dive Course

**this** is one of JavaScript's most confusing concepts because its value is determined at **call time**, not definition time. Key rules: in a method call (`obj.fn()`), this = obj. In a plain function call, this = undefined (strict) or global. Arrow functions inherit this from enclosing scope. `bind()`, `call()`, `apply()` override this.

1Understanding this Keyword

this is one of JavaScript's most confusing concepts because its value is determined at call time, not definition time. Key rules: in a method call (obj.fn()), this = obj. In a plain function call, this = undefined (strict) or global. Arrow functions inherit this from enclosing scope. bind(), call(), apply() override this.

💡

Arrow functions are the easiest way to preserve 'this' inside callbacks — they capture the outer 'this' lexically.

editor.html

class Timer {
  constructor() { this.ticks = 0; }

  start() {
    // Arrow function preserves 'this' from start()
    setInterval(() => {
      this.ticks++;
      if (this.ticks === 3) console.log('3 ticks!');
    }, 100);
  }
}
new Timer().start();

localhost:3000

2Practical Example

Here is a real-world application of this Keyword showing how it is used in production JavaScript code.

editor.html

// Explicit binding
function introduce() {
  return `I am ${this.name}`;
}

const alice = { name: 'Alice' };
const bob   = { name: 'Bob' };

console.log(introduce.call(alice));  // I am Alice
console.log(introduce.apply(bob));   // I am Bob

const aliceIntro = introduce.bind(alice);
console.log(aliceIntro());            // I am Alice

localhost:3000

3Best Practices

Follow these guidelines when working with this Keyword:

1. Use arrow functions in callbacks to preserve outer 'this'

2. Use bind() when passing methods as callbacks

3. Use class syntax which handles 'this' more predictably

⚠️

Tip: Arrow functions are the easiest way to preserve 'this' inside callbacks — they capture the outer 'this' lexically.

editor.html

class Timer {
  constructor() { this.ticks = 0; }

  start() {
    // Arrow function preserves 'this' from start()
    setInterval(() => {
      this.ticks++;
      if (this.ticks === 3) console.log('3 ticks!');
    }, 100);
  }
}
new Timer().start();

localhost:3000

Examples

Example 01Basic Usage

class Timer {
  constructor() { this.ticks = 0; }

  start() {
    // Arrow function preserves 'this' from start()
    setInterval(() => {
      this.ticks++;
      if (this.ticks === 3) console.log('3 ticks!');
    }, 100);
  }
}
new Timer().start();

Example 02Advanced Example

// Explicit binding
function introduce() {
  return `I am ${this.name}`;
}

const alice = { name: 'Alice' };
const bob   = { name: 'Bob' };

console.log(introduce.call(alice));  // I am Alice
console.log(introduce.apply(bob));   // I am Bob

const aliceIntro = introduce.bind(alice);
console.log(aliceIntro());            // I am Alice

Best Practices

Use arrow functions in callbacks to preserve outer 'this'
Use bind() when passing methods as callbacks
Use class syntax which handles 'this' more predictably

Interview Question

What is the difference between call(), apply(), and bind()?▼

Hint: Immediate vs delayed, individual args vs array.

All three set 'this' explicitly. call(thisArg, arg1, arg2) invokes immediately with individual args. apply(thisArg, [argsArray]) invokes immediately with an array of args. bind(thisArg) returns a NEW function with 'this' permanently bound — doesn't call immediately.

Exercises

MediumPractice using this Keyword in a real scenario.

View Solution

class Timer {
  constructor() { this.ticks = 0; }

  start() {
    // Arrow function preserves 'this' from start()
    setInterval(() => {
      this.ticks++;
      if (this.ticks === 3) console.log('3 ticks!');
    }, 100);
  }
}
new Timer().start();

Frequently Asked Questions

What is the difference between call(), apply(), and bind()?▼

Related Functions

MethodsArrow-FunctionsClosuresClasses