this in JavaScript

JavaScriptJunior~2 min read

1. What `this` is

this is a reference to the execution context of a function, that is - the object in whose context the function was called.

In simpler terms:

this is not determined when the function is declared;
it is assigned at the moment the function is called (runtime);
and depends on the way it is called, not on where the function is written.

2. Global context

In the global scope (outside a function):

javascript

console.log(this);

In a browser → window
In Node.js → {} (an empty object in the module)

3. Inside a regular function

javascript

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

showThis(); // ?

With no "owner" (obj.method()):

In non-strict mode → this = window
In strict mode ('use strict') → this = undefined

4. In an object method

javascript

const user = {
  name: 'Tim',
  sayHi() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

user.sayHi(); // Hi, I'm Tim

Here this → refers to the user object, because the function is called through a dot (user.sayHi()).

5. Losing `this`

javascript

const user = {
  name: 'Tim',
  sayHi() {
    console.log(this.name);
  }
};

const fn = user.sayHi;
fn(); // undefined, because the context is lost

When we store a reference to the method in a variable, this is no longer tied to user.

6. How to keep `this`

Way 1 - `bind`

javascript

const boundFn = user.sayHi.bind(user);
boundFn(); // Hi, I'm Tim

Way 2 - an arrow function

Arrow functions have no this of their own - they inherit this from the outer scope:

javascript

const user = {
  name: 'Tim',
  sayHiLater() {
    setTimeout(() => {
      console.log(this.name); // 'Tim'
    }, 1000);
  }
};

user.sayHiLater();

7. In constructors (`new`)

If a function is called with new, this points to the new object being created:

javascript

function User(name) {
  this.name = name;
}

const tim = new User('Tim');
console.log(tim.name); // Tim

When calling via new:

an empty object {} is created;
it is bound to this;
the function runs;
that object is returned.

8. In event handlers (browser)

javascript

button.addEventListener('click', function() {
  console.log(this); // the button element
});

this inside the handler points to the DOM element the event is attached to.

If you use an arrow function:

javascript

button.addEventListener('click', () => {
  console.log(this); // not button, but the outer context
});

9. Explicit control of `this` (`call`, `apply`, `bind`)

Method	What it does	When it is called
`call(thisArg, a, b)`	calls the function with the given `this`	immediately
`apply(thisArg, [a, b])`	the same, but arguments as an array	immediately
`bind(thisArg)`	returns a new function with `this` "bound"	later

javascript

function greet() {
  console.log(`Hi, ${this.name}`);
}

const user = { name: 'Tim' };

greet.call(user);  // Hi, Tim
greet.apply(user); // Hi, Tim
greet.bind(user)(); // Hi, Tim

10. In arrow functions

Arrow functions have no this of their own. It is inherited from the outer lexical environment.

javascript

const user = {
  name: 'Tim',
  showThis: () => console.log(this)
};

user.showThis(); // window (or undefined in strict mode)

Here this is not user, because the arrow function took this from the global context.

11. `this` in classes

javascript

class User {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(`Hi, ${this.name}`);
  }
}

const tim = new User('Tim');
tim.sayHi(); // Hi, Tim

In class methods, this works the same way as in regular object methods.

SUMMARY

Context	What `this` will be
Global (in a browser)	`window`
In a regular function	`undefined` (in strict), `window` (in non-strict)
In an object method	The object itself
In an arrow function	`this` of the outer scope
In a constructor / class	The new instance
In an event handler	The DOM element
Via `call` / `apply` / `bind`	The manually specified object

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.