Understanding the `this` Keyword in JavaScript

what is `this`

this is just a reference ( a pointer) to the object that is calling a function

people misconception that this refer to where the function is written this is dead wrong

js does not care where did you written a function it only care about how it is called

const user = {
  name: "Dushyant",
  greet: function () {
    console.log(this.name);
  }
};

user.greet();

what happen here -

who called greet -> user

so this = user

eg 2

function greet() {
  console.log(this.name);
}

const user1 = { name: "A", greet };
const user2 = { name: "B", greet };

user1.greet(); // A
user2.greet(); // B

same function, same code

different output why ?

Because:

user1 is calling -> this = user1

user2 is calling -> this = user2

inShort this doesnot belong to the function , it belong to the way the funtion is called.

this in global context

global context refer to the evironment where code run outside of any function, object , or block scope.

whe this is used in global scope , it refer to the global object.

in browser that global object is called window

eg

console.log(this);

if u run this in browser you will see

window

this do mean that at the global level , this is pointing to the window object.

why does this really matter using var and ( let, const )

eg1

var a = 10;

console.log(this.a);

output

10

here

• We declared a using var

• In the browser, var variables become part of the window object

• Since this is pointing to window, we can access it using this.a

now here we have smalll catch

let b = 20;

console.log(this.b);

Output:

undefined

Even though b exists, this.b is undefined.

That’s because:

• Variables declared with let and const do not attach to the window object

• So this cannot access them

keypont to remember :

• In global scope, this points to the global object (window in browsers)

• var variables can be accessed using this

• let and const cannot

  ---

  this inside object

now we move from global to something more practial object

when a function is inside an object and is called using that object , this refer to that object.

Basic Example

const user = {
  name: "Dushyant",
  greet() {
    console.log(this.name);
  }
};

Output:

Dushyant

so what happening here

• user is calling greet()

• so this = user

• this.name -> "Dushyant"

mistake that can occur

people think this refer to object where the function is written -- well not always it only works because the objecct is calling it

this inside function

now lets look what happen when this is used inside normal function

overview- when a function is called without any object, this does not point to any specific object instead it falls back to a default value

Eg

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

show();

Output (in browser):

window

What’s Happening

Look at the function call:

show();

• There is no object before a dot (.)

• No clear caller

in browser

this = window

Now try the same code in strict mode:

"use strict";

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

show();

Output:

undefined

what happen

In strict mode, JavaScript becomes more strict (obviously):

• It does not allow default binding to the global object

• So instead of window, you get undefined

Key Difference

how calling context changes this

this is declared at a time of function call - not when the function is created

same function

different caller

different this

eg1

same function diferent result

function sayName() {
  console.log(this.name);
}

const user1 = { name: "A", sayName };
const user2 = { name: "B", sayName };

user1.sayName(); // A
user2.sayName(); // B

here we can see

this = user1

this = user2

so what changes - only the called changed

eg2- Function detached

const user = {
  name: "Dushyant",
  sayName: function () {
    console.log(this.name);
  }
};

const fn = user.sayName;

fn();

output

undefined

fn() -> no object no dot no caller so thia fall back to default ( window / undefined)

eg3 - Assigning to another object

const user1 = {
  name: "A",
  sayName: function () {
    console.log(this.name);
  }
};

const user2 = {
  name: "B"
};

user2.sayName = user1.sayName;

user2.sayName(); // B

here caller = user2

so this = user2

even though function come from user1

inShort

Find how the function is called

• obj.fn() → this = obj

• fn() → this = default

• Different object → different this

  ---

  conlusion of this blog

this isnot fixed it changes depending on how the function is called