`this` keyword in javascript

this keyword used to reference current object in javascript. There are two scenario where current object is determined differently.

* Calling object represented by `this` in function.

* Arrow function can reference object where the function defined.

To demonstrate the above scenarios we shall take some examples.

Suppose,

var x = 10;

(function() {
   console.log(this.x);
})() // 10

(() => {
   console.log(this.x);
})() // 10

There are two self executing functions both resulted in "10". At first look it seems behaving same, but there is basic deference what we going to see.

const xObj = {
    value: 10,
    getValue: () => {
        return this.value;
    }
};

const yObj = {
    value: 10,
    getValue: function () {
        return this.value;
    }
};

xObj.getValue(); // undefined
yObj.getValue(); // 10

Why undefined for `xObj`? Because arrow function is defined under object literal which is not a function itself. Object literal is not a function definition so `this` used inside object literal will not refer to the object. We can say that the arrow function is defined under global function, so `this` inside the arrow function points to global not to `xObj`.

`yObj`'s `getValue` points to its calling object. Here it is `yObj` own self.

Suppose there is

const zObj = {
    value: 20
};

zObj.getValue = yObj.getValue;

zObj.getValue(); // 20

`zObj` becomes calling object for normal function `getValue`, so `this` inside the function refers to `zObj`.

Arrow function statically binds to `this` where the arrow function is created. Arrow function is not seems useful when used with object literal defined in global context but it is helpful in some situation when we are using functional constructor to create object.

const xFunc = function () {
    this.value = 10;
    this.getValueArrow = () => {
        return this.value;
    };
    this.getValueNormal = function () {
        return this.value;
    };
};

const xf = new xFunc();

xf.getValueArrow() // 10

xf.getValueNormal(); // 10

Here, both calling object and object in which the functions defined are same. So, it looks like both function works same way, but they aren't.

const yFunc = function () {
    this.value = 20;
};

const yf = new yFunc();

yf.getValueArrow = xf.getValueArrow;

yf.getValueNormal = xf.getValueNormal;

yf.getValueArrow(); // 10

yf.getValueNormal(); // 20

Here `getValueArrow` function's `this` will statically bind to object created by functional constructor where the arrow function defined in, so it resulted in "10" as value from statically bounded `this`.

Whereas `getValueNormal` function's `this` will dynamically bind to calling object and reflects values from it.