JavaScript · Lesson 20 / 32 · தமிழ்

this Keyword

கருத்தைப் புரிந்துகொள்ளுங்கள். Code-ஐ மாற்றி இயக்குங்கள். ஒரு சிறிய பயிற்சியால் கற்றதை உறுதி செய்யுங்கள்.

Detailed notesRunnable JavaScriptPractice + answer

மூலப் பாட விளக்கங்கள் தமிழில் உள்ளன. கூடுதல் concept, practice மற்றும் answer notes ஆங்கிலத்தில் உள்ளன.

01 / Understand

முக்கியக் கருத்து

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

விரிவான விளக்கங்கள்

this Keyword என்னன்னு தெரியுமா?

this என்பது currently function-ஐ execute பண்றது எந்த object-ன்னு refer பண்றது. இதன் value function எப்படி call ஆகுதுன்னு பொறுத்து மாறும் — arrow functions தவிர.

வேற வேற Contexts-ல this

JavaScript reference fragmentCODE

// 1. Global context
console.log(this); // Window {} (browser-ல)

// 2. Object method — object-ஐ refer பண்ணும்
const user = {
  name: "Alice",
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
};
user.greet(); // "Hi, I'm Alice"

// 3. Constructor / class — new instance-ஐ refer பண்ணும்
class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, I'm ${this.name}`;
  }
}
const alice = new Person("Alice");
alice.greet(); // "Hello, I'm Alice"

Arrow Functions மற்றும் this

JavaScript reference fragmentCODE

const timer = {
  count: 0,
  // Regular function — callback-ல 'this' lost ஆகும்
  startBroken() {
    setInterval(function() {
      this.count++; // ❌ 'this' is Window!
    }, 1000);
  },
  // Arrow function — surrounding scope-ல இருந்து inherit பண்ணும்
  start() {
    setInterval(() => {
      this.count++; // ✅ 'this' is timer
      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() — immediately invoke, args separately
introduce.call(person, "Hello", "!");  // "Hello, I'm Alice!"

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

// bind() — 'this' lock பண்ணி new function return பண்ணும்
const aliceIntro = introduce.bind(person);
aliceIntro("Hey", "?"); // "Hey, I'm Alice?"

Method	எப்போ use பண்றது	Returns
call(ctx, a, b)	Method borrow பண்ண, args தெரியும்போது	Function result
apply(ctx, [a,b])	Method borrow பண்ண, args array-ல	Function result
bind(ctx)	Callbacks-க்கு 'this' fix பண்ண	New function

03 / Read & predict

முழுமையான உதாரணம்

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());

எதிர்பார்க்கும் முடிவைப் பாருங்கள்

Hi Kavi
Hi Kavi

04 / Experiment

மாற்றி இயக்கிப் பாருங்கள்

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

Open editor ↗

Editor load ஆனதும் code-ஐ ஏற்றி Run அழுத்துங்கள்.

OneCompiler என்ற இலவச வெளிப்புற சேவை code-ஐ இயக்குகிறது. Run செய்யும் code அங்கு அனுப்பப்படும். தனிப்பட்ட தகவல்கள் அல்லது secret keys உள்ளிட வேண்டாம்.

05 / Your turn

சிறிய பயிற்சி

Practice challenge

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

விடை மற்றும் விளக்கம்

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

தவிர்க்க வேண்டிய தவறு: Passing an unbound method as a callback can lose its receiver. An arrow method is not a general replacement when you need dynamic this.

அடுத்த பாடத்திற்குத் தயாரா?

Explain the example in your own words.
Complete the challenge before revealing its answer.
Describe the common mistake and how to avoid it.