How `this` works in JavaScript

this.md

this

In JavaScript, this is a reference to the calling object of the function. For example:

var letters = {  // <= `this` (letters) is the calling object
  letter: 'A',
  getLetter: function () {
    // here, `this.letter` = `letters.letter`
    console.log(this.letter);
  }
};

letters.getLetter();
//=> A

Nested object

Let's try the same thing on a nested object:

var letters = {
  letter: 'A',
  getLetter: function () {
    console.log(this.letter);
  },
  nested: { // <= `nested` is the calling object, e.g. `this`, for nested.getLetter()
    letter: 'BB',
    getLetter: function () {
      console.log(this.letter);
    }
  }
};

letters.getLetter();
//=> A

letters.nested.getLetter();
//=> BB

Object inside a function

How about when this is used on an object inside a function?

var letters = {
  letter: 'A',
  getLetter: function () {
    console.log(this.letter);

    var inner = {}; // <= `inner` is the calling object, e.g. `this`, for inner.getLetter()

    inner.letter = 'inner-A';
    inner.getLetter = function () {
      console.log(this.letter);
    };

    return inner.getLetter();
  }
};

letters.getLetter();
//=> A
//=> inner-A

Function inside a function (in an object)

How about when this is used on a function inside an object?

var letters = {
  letter: 'A',
  getLetter: function () {
    console.log(this.letter);

    function someFn() {
      console.log(this.letter);
    }
    return someFn();
  }
};

letters.getLetter();
//=> undefined

We need to create a reference to this to be used in the function:

var letters = {
  letter: 'A',
  getLetter: function () {
    console.log(this.letter);
    var self = this;

    function someFn() {
      console.log(self.letter);
    }
    return someFn();
  }
};

letters.getLetter();
//=> A