Hey everyone! In this article we're going to talk about the THIS keyword in Javascript.
This used to be a concept that confused me a little bit, so I'll try to break it down for you so you can understand its uses and in what situations can it be useful. Let's go!
Table of Contents
- What's the THIS keyword
- Calling THIS by itself
- THIS in an object method
- THIS in a function
- THIS in an event
- THIS methods (call, apply and bind)
- Wrap up
What's the THIS keyword?
Ok, so let's start by defining what the this
keyword is. In JavaScript, the this
keyword always refers to an object. The thing about it is that the object it refers to will vary depending on how and where this
is being called.
And there's a few different ways in which you can use the this
keyword, so let's see the most common cases and how it behaves in each of them.
An important comment is that this
is not a variable – it's a keyword, so its value can't be changed or reassigned.
How to Call this
By Itself
If we call this
by itself, meaning not within a function, object, or whatever, it will refer to the global window object.
If you print it like console.log('this alone', this);
you'll get this in your console: [object Window]
.
Or this if you expand it:

this
by itselfHow to Call this
in an Object Method
But if we call this
within an object method, like in the following example:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
getThis : function() {
return this;
}
};
console.log('this in object method', person.getThis());
We'll see that this
no longer refers to the object itself:

this
within an object methodAnd given this, we can use this
to access other properties and methods from the same object:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
getFullName : function() {
return this.name + ' ' + this.lastName;
}
};
console.log('this in object method', person.getFullName());
How to Call this
in a Function
If we call this
within a function like in the following example:
function test() {
console.log('this in a function', this);
}
test()
this
will now refer again to the general window object, and we'll get this in our console: [object Window]
.
A note about arrow functions
In arrow functions, JavaScript sets the this
lexically. This means that the arrow function doesn't create its own execution context but inherits the this
from the outer function where the arrow function is defined.
In most cases, this means this
will refer to the window object as well:
const show = () => this
console.log('arrow function this', show())

It's important to notice this because, for example, if we try to implement an arrow function to it as an object method, we won't be able to access the object through the this
keyword:
const person = {
name: 'Pedro',
surname: 'Sanchez',
sayName: () => this.name + ' ' + this.surname
}
console.log(person.sayName());

A note about strict-mode
When using strict-mode, calling this
within a function will return undefined
.
"use strict";
function show() {
console.log(this);
}
show();

As a side comment, if you're not familiar with what strict-mode is, following the MDN docs:
JavaScript's strict mode is a way to opt in to a restricted variant of JavaScript, thereby implicitly opting-out of "sloppy mode". Strict mode isn't just a subset: it intentionally has different semantics from normal code.
Strict mode makes several changes to regular JavaScript semantics:
- Eliminates some JavaScript silent errors by changing them to throw errors.
- Fixes mistakes that make it difficult for JavaScript engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that's not strict mode.
- Prohibits some syntax likely to be defined in future versions of ECMAScript.
How to Use this
in an Event Listener
When using this
in an event listener, this
will refer to the DOM element that fired the event.
document.getElementById('testBtn').addEventListener('click', function() {
console.log('this in a event', this);
})
In our case, we added the event listener to a button element: <button id="testBtn">TEST</button>
And after clicking it, we get the following in our console:

this
Methods (call, apply and bind)
To complicate the subject a little more, javascript provides three native methods that can be used to manipulate the way the this
keyword behaves. These methods are call
, apply
and bind
. Let's see how they work.
How to Use the Call Method
With call
we can invoke a method passing an owner object as an argument. Said in a simpler way, we can call a method indicating to which object the keyword this
will refer to.
Let's see an example:
const person1 = {
name: 'Pedro',
surname: 'Sanchez',
sayName: function() {
return this.name + " " + this.surname;
}
}
const person2 = {
name: 'Jimena',
surname: 'Juarez'
}
console.log(person1.sayName.call(person2));
Here we have two person objects. Each with its name
and surname
properties, and the person1
object has a sayName
method.
Then we call the person1
sayName
method in the following way: person1.sayName.call(person2)
.
By doing this, we're indicating that when the sayName
method executes, the this
keyword won't refer to the object that "owns" the method (person1
) but to the object we passed as parameter (person2
). As a consequence, we get this in our console:

Keep in mind that if the given method accepts arguments, we can pass them as well when we invoke it with call
:
const person1 = {
name: 'Pedro',
surname: 'Sanchez',
sayName: function(city, country) {
return this.name + " " + this.surname + ", " + city + ", " + country;
}
}
const person2 = {
name: 'Jimena',
surname: 'Juarez'
}
console.log(person1.sayName.call(person2, "DF", "Mexico"));

How to Use the Apply Method
The apply
method works very similarly to call
. The only difference between them is that call
accepts parameters as a list separated by colons (as the last example we saw), and apply
accepts them as an array.
So if we want to replicate the same example using apply
we'd have to do it like this:
const person1 = {
name: 'Pedro',
surname: 'Sanchez',
sayName: function(city, country) {
return this.name + " " + this.surname + ", " + city + ", " + country;
}
}
const person2 = {
name: 'Jimena',
surname: 'Juarez'
}
console.log(person1.sayName.apply(person2, ["DF", "Mexico"]));

How to Use the Bind Method
Same as call
and apply
, the bind
method indicates the object to which the this
keyword will refer when a given method executes.
But the difference with bind
is that it will return a new function, without executing it. While with call
and apply
the function executed right away, using bind
we must execute it separately.
Let's see this in an example:
const person1 = {
name: 'Pedro',
surname: 'Sanchez',
sayName: function() {
return this.name + " " + this.surname
}
}
const person2 = {
name: 'Jimena',
surname: 'Juarez'
}
const sayPerson2Name = person1.sayName.bind(person2)
console.log(sayPerson2Name())

Wrapping Up
Well everyone, as always, I hope you enjoyed the article and learned something new.
If you want, you can also follow me on LinkedIn or Twitter. See you in the next one!
