JavaScript this Keyword: How It Works in Depth with Examples

The this keyword links code, context, and object reference in JavaScript. You can use it to refer to the owner of the code.

Understand What is the this Keyword in JavaScript

The this keyword points to the object that runs the code. It gives you a way to refer back to that object inside a function.

You can use this inside a function. That allows you to write it like this.property or this.method().

It enables you to access object data from inside methods and keeps code in context, and helps you to reuse.

You have to avoid this when you want to run code in a strict, global context. That prevents confusion from a wrong reference.

Here is a quick example:

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

You call showName() on an object. That gives you this.name. That runs in that object context.

Use this in Object Methods

You can run this in the global code. That binds to the global object (like window in a browser). It gives you a loose reference and is not safe in strict code.

The this refers to that object. That lets method access the object’s data. It runs the method on an object

Here is an example:

const user = {
  name: 'Ali',
  greet() {
    console.log('Hello, ' + this.name);
  }
};
user.greet();

The greet function on the user object logs “Hello, Ali”. this binds to the user, so it uses the user name.

For another example:

const pet = {
  type: 'dog',
  getType() {
    return this.type;
  }
};
const result = pet.getType();
console.log(result);

You call getType on pet. That returns ‘dog’. this binds to the pet so it returns the pet’s type.

Use this in Arrow Functions

Arrow functions do not bind this. They inherit this from outside. That gives you a stable reference inside nested code.

Here is an example:

const group = {
  name: 'Team',
  showLater() {
    setTimeout(() => {
      console.log(this.name);
    }, 100);
  }
};
group.showLater();

You run showLater. Arrow inside setTimeout uses this from showLater. That refers to a group, and it logs ‘Team’.

Use this in Event Handlers

In events, this refers to the element that runs the code. That lets you change element data from code.

For example:

button.onclick = function () {
  this.textContent = 'Clicked';
};

You click the button. handler to run on the element. this points to that element which changes its label to ‘Clicked’.

How to Change this Keyword with call, apply, and bind in JavaScript

You can use call or apply to change this when you run a function. That lets you pass an object as context. Also, you can use bind to lock this to that object for later.

Here is an example for the “call”:

function sayCity() {
  console.log(this.city);
}
sayCity.call({city: 'Riyadh'});

The call sets this.city to ‘Riyadh’ which prints ‘Riyadh’.

apply example:

function sayFull(char1, char2) {
  console.log(this.name + char1 + char2);
}
sayFull.apply({name: 'Bob'}, ['!', '?']);

The apply function sets this.name to ‘Bob’. That prints ‘Bob!?’. Those uses apply to pass-by-array.

bind example:

const showColor = function () {
  console.log(this.color);
}.bind({color: 'red'});
showColor();

The bind object with color locks this to object. That prints ‘red’.

Examples of this Keyword in JavaScript

Method on nested object:

const car = {
  brand: 'Toyota',
  engine: {
    getBrand() {
      console.log(this.brand);
    }
  }
};
car.engine.getBrand();

This prints undefined. this points to the engine, not the car. That shows nested context does not inherit the parent object.

Borrow method:

const obj1 = {
  val: 5,
  getVal() {
    return this.val;
  }
};
const obj2 = {val: 10};
console.log(obj1.getVal.call(obj2));

This logs 10. You borrow getVal from obj1. You set this to obj2. That shows you can reuse a method for another object.

Bind in callback:

const counter = {
  count: 0,
  inc() {
    this.count++;
    console.log(this.count);
  }
};
setInterval(counter.inc.bind(counter), 1000);

This logs numbers each second. You bind counter. That keeps this inside inc correct.

Wrapping Up

In this article, you learned this keyword and how it works.

Here is a quick recap:

• The this links code to object.
• You use methods to set it in an object.
• Arrow uses outer context.
• Events use an element as context.
• call/apply/bind let you override context.

FAQs

const obj = {
  name: "Alex",
  greet: function() {
    console.log(this.name);
  }
};
obj.greet(); // Output: Alex

function showName() {
  console.log(this);
}
showName(); // Window in browsers or undefined in strict mode

const obj = {
  name: "Sam",
  normal: function() { console.log(this.name); },
  arrow: () => { console.log(this.name); }
};
obj.normal(); // Output: Sam
obj.arrow();  // Output: undefined

function greet() {
  console.log("Hi " + this.name);
}
const person = { name: "John" };
greet.call(person);  // Hi John
greet.apply(person); // Hi John
const bound = greet.bind(person);
bound();             // Hi John

Similar Reads