this Keyword Interview Questions in JavaScript

this Keyword Interview Questions in JavaScript

this is asked in almost every JavaScript interview. Here are the most asked questions with code and answers.

Q1: What is the output?

function foo() { console.log(this); }
foo();
``
**Answer**: `window` (non-strict) or `undefined` (strict). Plain call, default binding.

### Q2: What is the output?

```js
const obj = { x: 10, foo() { console.log(this.x); } };
obj.foo();
``
**Answer**: `10`. Method call, implicit binding.

### Q3: What is the output?

```js
const obj = { x: 10, foo() { console.log(this.x); } };
const fn = obj.foo;
fn();
``
**Answer**: `undefined` (strict) or `window.x` (non-strict). Detaching loses `this`.

### Q4: What is the output?

```js
const obj = { x: 10, foo: () => console.log(this.x) };
obj.foo();
``
**Answer**: `undefined`. Arrow inherits `this` from the enclosing scope, not `obj`.

### Q5: What is the output?

```js
function Person(name) {
  this.name = name;
  setTimeout(function () { console.log(this.name); }, 0);
}
new Person("Kunal");
``
**Answer**: `undefined` (or `window.name`). The callback is a plain call. Fix with arrow.

### Q6: What is the output?

```js
function Person(name) {
  this.name = name;
  setTimeout(() => { console.log(this.name); }, 0);
}
new Person("Kunal");
``
**Answer**: `"Kunal"`. Arrow inherits `this` from `Person`, where `this` is the instance.

### Q7: What is the output?

```js
const obj = { x: 10 };
function foo(y) { return this.x + y; }
console.log(foo.call(obj, 5));
``
**Answer**: `15`. `call` sets `this` to `obj` and passes `5`.

### Q8: What is the output?

```js
const obj = { x: 10 };
function foo(y) { return this.x + y; }
const bound = foo.bind(obj, 5);
console.log(bound());
``
**Answer**: `15`. `bind` presets `this` and the first argument.

### Q9: Explain the precedence of this bindings.

`new` > `bind` > `call`/`apply` > method call > plain call. Arrow functions are an exception (lexical `this`).

### Q10: How do you fix the lost this bug in callbacks?

Use `bind`: `setTimeout(obj.method.bind(obj), 1000)`. Or use an arrow wrapper: `setTimeout(() => obj.method(), 1000)`. Or use an arrow method.

### The Takeaway

`this` interview questions test: plain call (default), method call (implicit), detaching (loses `this`), arrow methods (lexical `this`), setTimeout in constructors (arrow vs regular), `call`/`bind`, precedence, and the lost `this` fix. Identify the call type and apply the rules.