Difference between Context and Scope in JavaScript

Context and Scope both are completely different things which commonly being misunderstood as same by many people.
Context is this of the currently executing function, i.e. the environment in which function is getting executed. Scope on the other hand refers to the variables and methods which is accessible by currently executing function.

Value of this associated with any function gets dynamically assigned depending on how function is getting invoked.

To understand the context/this properly we need to first understand how functions get invoked.

JavaScript functions can be invoked in four different ways:

• as functions
• as methods
• as constructors
• indirectly through their call() and apply() methods

Function Invocation

This is typical and most obvious way to invoke a function. Function name and parameters inside the round brackets. These parameters will get assigned to the parameters defined in function definition.

Function definition:

var a = function (parameter_1, parameter_2) {
      console.log(parameter_1);
      console.log(parameter_2);
}      // Function Definition
var param_1 = "This is Parameter 1";
var param_2 = "This is Parameter 2";
a(param_1, param_2);      // Function invocation

Here a() function is getting invoked by window object. so this for a() function would be window Object.

var a = function (parameter_1, parameter_2) {
      console.log(this);
}      // Function Definition
var param_1 = "This is Parameter 1";
var param_2 = "This is Parameter 2";
a(param_1, param_2);       // Print Window Object

Above code will print Window Object on console.

Method Invocation

If function a() is associated with any object or if function a() is property of any object then that function a() will be called method.

var o = {
      f: function() {
            console.log("I am method of object o.");
      }
}
o.f();      // Method Invocation

Here f() function is getting invoked by object o. So this associated with function would be object o.

var o = {
      f: function() {
            console.log(this);
      }
}
o.f();       // Print o object

Constructor Invocation

If a function is getting invoked by new keyword than it is constructor invocation. Constructors are supposed to initialize the object and return the newly created object. this associated with constructor function, is prototype object which will initialize new object and finally return it.

var a = function(p) {
      this.p1 = p;
      console.log(this);      //  Print prototype object
}
var obj = new a("Bazinga!!");
obj.p1;      //  Says Bazinga!!

While creating constructors you are not supposed to return anything, However if you explicitly return any object from constructor than your object will get returned instead of newly created object.
If you return any primitive value or return nothing than return statement will get ignored and newly created object will be returned.

Indirect Invocation

If you explicitly want to define the context/this of function than use either call() or apply() method of window object.

var o = {
      f: function() {
            console.log("I am method of object o.");
      }
      f();      // this of function f() will be window object.
}
o.f();      // this of function f() will be object o.
var newObject = {};
f.call(newObject);      // this of function f() will be object newObject.
f.apply(newObject);      // this of function f() will be object newObject.

Both methods allow you to specify the arguments for the invocation. The call() method uses its own argument list as arguments to the function f() and the apply method expects an array of values to be used as arguments for function f().