content/snippets/js/s/this.md
---
title: Understanding the "this" keyword in JavaScript
shortTitle: The "this" keyword in JavaScript
type: story
language: javascript
tags: [function,object]
cover: u-got-this
excerpt: JavaScript's `this` keyword can confuse beginners and veterans alike. Learn how it works in different scenarios and start using it correctly.
listed: true
dateModified: 2021-06-12
---
## What is `this`?
In JavaScript, the `this` keyword refers to the object that is currently executing the code. The short version of what `this` evaluates to is as follows:
- By default, `this` refers to the global object.
- In a function, when not in strict mode, `this` refers to the global object.
- In a function, when in strict mode, `this` is `undefined`.
- In an arrow function, `this` retains the value of the enclosing lexical context's `this`.
- In an object method, `this` refers to the object the method was called on.
- In a constructor call, `this` is bound to the new object being constructed.
- In an event handler, `this` is bound to the element on which the listener is placed.
## Global context
In the global execution context, `this` refers to the global object.
```js
console.log(this === window); // true
```
## Function context
When not in strict mode, a function's `this` refers to the global object.
```js
function f() {
return this;
}
console.log(f() === window); // true
```
When in strict mode, a function's `this` will be `undefined` if not set when entering the execution context.
```js
'use strict';
function f() {
return this;
}
console.log(f()); // undefined
```
## Object context
When a function is called as a method of an object, `this` refers to the object the method is called on. This applies to methods defined anywhere in the object's prototype chain (i.e. own and inherited methods).
```js
const obj = {
f: function() {
return this;
}
};
const myObj = Object.create(obj);
myObj.foo = 1;
console.log(myObj.f()); // { foo: 1 }
```
Similarly, when used inside a constructor, `this` refers to the object being constructed.
```js
class C {
constructor() {
this.x = 10;
}
}
const obj = new C();
console.log(obj.x); // 10
```
## Arrow function context
In arrow functions, `this` retains the value of the enclosing lexical context's `this`.
```js
const f = () => this;
console.log(f() === window); // true
const obj = {
foo: function() {
const baz = () => this;
return baz();
},
bar: () => this
};
console.log(obj.foo()); // { foo, bar }
console.log(obj.bar() === window); // true
```
Notice how in the second example, an arrow function's `this` refers to the global object unless wrapped inside a regular `function` call, whose `this` refers to the object it's called from and its lexical context is retained by the arrow function.
## Event handler context
When used in an event handler, `this` refers to the element on which the listener is placed.
```js
const el = document.getElementById('my-el');
el.addEventListener('click', function() {
console.log(this === el); // true
});
```
## Binding `this`
Using `Function.prototype.bind()` returns a new function from an existing one, where `this` is permanently bound to the first argument of `bind()`.
```js
function f() {
return this.foo;
}
const x = f.bind({foo: 'hello'});
console.log(x()); // 'hello'
```
Similarly, using `Function.prototype.call()` or `Function.prototype.apply()` will bind the called function's `this` to the first argument of either of these functions only for this call.
```js
function f() {
return this.foo;
}
console.log(f.call({foo: 'hi'})); // 'hi'
```