What is Context?
Context in JavaScript is referring to the key word `this`. The keyword `this` can be very confusing because it can change based on several factors. Typically, this refers to the owner of the code that’s executing it. However, this can change based on how execution occurs or whether its ES5 or ES67 notation.

There are rules to determine the value of `this`, but before we get into that it’s important to note that the value of `this` can only change inside a function.

 ES5 vs ES6 notation

vary marvelHero = {
  name: 'Black Panther',
  printName: function() {
    console.log(this.name);
  }
};

marvelHero.printName() // Black Panther

The keyword `this` inside of an object’s method will refer to the object. One way to look at the example is to look at how the method is being invoked. The printName() function is to the left our marvelHero variable. Therefore, when executing a function as a method of an object `this` is referring to the object that is to the left the “.”.

## As mentioned before the value of this can only change inside of a function.

var marvelHero = {
  name: 'Black Panther',
  ablities: ['SuperHuman Senses', 'Healing Powers', 'Karate Skills'],
  usePowers: function() {
    this.ablities.forEach(function(ability){
      console.log(this.name + “ has ” + ability)
    });
  }
};

marvelHero.usePowers() // [object window] has SuperHuman Senses
				// [object window] has Healing Powers
				// [object window] has Karate Skills

In the example above the if we invoke out marvelHero.usePowers() the value of console.log(`this`.name + ability) will no longer refer to our marvelHero object. This is due to the fact that the owner of the code is no longer the marvelHero. Instead the owner of the code executing the function is now the window object. The value of this has lost its scope and will be globally scoped. Although this is within an object’s method. The function that is executing the code is inside another function which changes the owner of the code and is now global in our example.

One way we can keep the value of `this` is when we use a keyword called .bind()

var marvelHero = {
  name: 'Black Panther',
  ablities: ['SuperHuman Senses', 'Healing Powers', 'Karate Skills'],
  usePowers: function() {
    this.ablities.forEach(function(ability){
      console.log(this.name + "has" + ability)
    }.bind(this));
  }
};

marvelHero.usePowers() // Black Panther has SuperHuman Senses
				// Black Panther has Healing Powers
				// Black Panther has Karate Skills



The behavior of .bind() is a way ES5 notation keeps the value of this bound to the marvelHero method.


In ES6 notation has a different behavior than ES5.  Arrow functions  => are lexical scoped.
The value of `this` in ES6 notation will traverse the scope chain where it was defined.

var marvelHero = {
  name: 'Black Panther',
  ablities: ['SuperHuman Senses', 'Healing Powers', 'Karate Skills'],
  usePowers: function usePowers() {
    this.ablities.forEach(ability =>{
      console.log(this.name + "has" + ability)
    });
  }
};
marvelHero.usePowers()

In the example above the value of this with ES6 notation will console.log()
// Black Panther has SuperHuman Senses
// Black Panther has Healing Powers
// Black Panther has Karate Skills

As mentioned earlier, the value of this can change based on several factors. Another way `this` refers to an object is whenever we use the keyword `new`. When creating new object in our constructor function the value of `this` inside our class constructor method refers to the new instance.

class SuperHeros {
  constructor(name, powers) {
    this.name = name;
    this.powers = powers || [];
  }

  changePowers(){
    return this
  };
};

let hero = new SuperHeros('Black Panther', ['SuperHuman Senses', 'Healing Powers', 'Karate Skills'])

console.log(hero.changePowers())


Finally, if we call our console.log(hero.changePowers()) the value of `this` will return our `Black Panther` object.