The this Keyword

</>Coding Tamilan.← JavaScript course

JavaScript · Lesson 20 / 32 · English

The this Keyword

Understand the idea. Change the code. Build confidence with one focused experiment.

Detailed notesRunnable JavaScriptPractice + answer

Read this lesson in தமிழ் ↗.

01 / Understand

Start with the idea

For a normal function, this depends on how the function is called. Arrow functions capture this from their surrounding scope rather than defining their own receiver.

Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.

02 / Explore

Step-by-step lesson notes

The this Keyword

this refers to the object that is currently executing the function. Its value depends entirely on how the function is called — not where it is defined (except for arrow functions).

this in Different Contexts

JavaScript reference fragmentCODE
// 1. Global context — refers to globalThis (window in browser)
console.log(this); // Window {} in browser

// 2. Regular function — depends on call site
function show() {
  console.log(this);
}
show();            // Window (sloppy) or undefined (strict mode)

// 3. Object method — refers to the object
const user = {
  name: "Alice",
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
};
user.greet(); // "Hi, I'm Alice"

// 4. Constructor / class — refers to new instance
class Person {
  constructor(name) {
    this.name = name; // 'this' = the new object
  }
  greet() {
    return `Hello, I'm ${this.name}`;
  }
}
const alice = new Person("Alice");
alice.greet(); // "Hello, I'm Alice"

Arrow Functions and this

JavaScript reference fragmentCODE
const timer = {
  count: 0,
  // Regular function — 'this' is lost in callback
  startBroken() {
    setInterval(function() {
      this.count++; // ❌ 'this' is Window, not timer!
    }, 1000);
  },
  // Arrow function — 'this' is inherited from surrounding scope
  start() {
    setInterval(() => {
      this.count++; // ✅ 'this' is timer object
      console.log(this.count);
    }, 1000);
  }
};

call(), apply(), bind()

JavaScript reference fragmentCODE
function introduce(greeting, punctuation) {
  return `${greeting}, I'm ${this.name}${punctuation}`;
}

const person = { name: "Alice" };

// call() — invoke immediately, args listed separately
introduce.call(person, "Hello", "!");   // "Hello, I'm Alice!"

// apply() — invoke immediately, args as array
introduce.apply(person, ["Hi", "."]); // "Hi, I'm Alice."

// bind() — returns a NEW function with 'this' locked
const aliceIntro = introduce.bind(person);
aliceIntro("Hey", "?"); // "Hey, I'm Alice?"

// Practical bind — fix 'this' in event handlers
class Button {
  constructor(label) {
    this.label = label;
    this.handleClick = this.handleClick.bind(this); // lock 'this'
  }
  handleClick() {
    console.log(`${this.label} clicked`);
  }
}
MethodWhen to useReturns
call(ctx, a, b)Borrow a method, known argsFunction result
apply(ctx, [a,b])Borrow a method, args as arrayFunction result
bind(ctx)Fix 'this' for later use (callbacks)New function
03 / Read & predict

A complete example

Run this complete index.js program in the JavaScript console editor below. The earlier reference fragments may need a browser page or other surrounding setup.

index.js · complete exampleCODE
"use strict";
const learner = {
  name: "Kavi",
  greet() { return "Hi " + this.name; }
};
const boundGreeting = learner.greet.bind(learner);
console.log(learner.greet());
console.log(boundGreeting());
Predict first. Reveal the expected result.
Hi Kavi
Hi Kavi
04 / Experiment

Make one change. See what happens.

Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.

Open editor ↗

Wait for the editor to load, then load this example and press Run.

Powered by the free OneCompiler editor. Code you run is sent to that external service. Keep personal data and secret keys out of your examples.

05 / Your turn

Put the idea to work

Practice challenge

Call learner.greet with .call({name: "Maya"}).

Reveal the answer and reasoning

learner.greet.call({name: "Maya"}) returns "Hi Maya" because call supplies the receiver.

One mistake to avoid: Passing an unbound method as a callback can lose its receiver. An arrow method is not a general replacement when you need dynamic this.

Your learning checkpoint

  • Explain the example in your own words.
  • Complete the challenge before revealing its answer.
  • Describe the common mistake and how to avoid it.
Coding Tamilan · Learn by doing.