JS interview in 2 minutes / this 🤯
Tags: javascript, typescript, beginners, career
Published: 2021-05-07 09:43:36

---
title: JS interview in 2 minutes / this 🤯
published: true
description: Let's try to figure out how to answer common JS questions in an interview.
tags: javascript, typescript, beginners, career
cover_image: https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1920px-Unofficial_JavaScript_logo_2.svg.png
---

**Question:**
Explain `this` keyword in JavaScript.

**Quick answer:**
`this` keyword is referencing the current execution context.

**Longer answer:**
`this` works differently depending on where it was called.

If you use `this` in the global context, it will reference the `window` object in the browser and the `global` object in the node.

```javascript
// browser
console.log(window.a) // undefined
this.a = 1
console.log(window.a) // 1

// node
console.log(global.a) // undefined
this.a = 1
console.log(global.a) // 1
```

For functions, it works similarly, but a still bit differently for the `strict` mode.

```javascript
function f1() {
  return this // default to global context
}

function f2() {
  'use strict';
  return this // undefined
}
```

Arrow functions have their own tricks as well, they always refer to enclosing `this`. We will get into details in the next section.

```javascript
let f1 = function() {
  return this
}

let f2 = () => this

console.log(f1(), f2()) // Window, Window

let obj = { f1, f2 }
console.log(obj.f1(), obj.f2()) // obj reference, Window
// ^^^ f1 changed reference, but f2 didn't
```

As for the class context, `this` refers object itself

```javascript
class Tmp {
  a = 10
  method() {
    console.log(this)
  }
}
let tmp = new Tmp()
tmp.method() // Tmp {a: 10}
```

Feels like these are the most popular cases, but there are much much more corner cases, take a look on [mdn](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
).


**Real-life applications:**

I think one of the most common caveats with `this` is when you are using callbacks, which are popular in React and in Angular as well.

```javascript
class User {
  _say(text) {
    console.log(text)
  }
  
  sayHello() {
    this._say('Hello world')
  }

  sayHi = () => this._say('Hi!')
}

let user = new User()

user.sayHi() // Works
user.sayHello() // Works

setTimeout(user.sayHi, 1000) // Works

// callback will show an error, because `this` reference will change
// Uncaught TypeError: this._say is not a function at sayHello
setTimeout(user.sayHello, 1000)
```

So be careful and stay safe!

**Resources:**
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this


**Other posts:**
* [JS interview in 2 minutes / Encapsulation (OOP)](https://dev.to/kozlovzxc/js-interview-in-2-minutes-encapsulation-oop-2ico)
* [JS interview in 2 minutes / Polymorphism (OOP)](https://dev.to/kozlovzxc/js-interview-in-2-minutes-polymorphism-oop-3pla)
* [JS interview in 2 minutes / Inheritance in OOP](https://dev.to/kozlovzxc/js-interview-in-2-minutes-inheritance-in-oop-53h2)

---

Btw, I will post more fun stuff here and on [Twitter](https://twitter.com/kozlovzxc). Let's be friends 👋