Scope vs Context in Javascript | Chinese Rule of Eight

ref –

https://medium.com/better-programming/scope-vs-context-in-javascript-b31818f58558#28ec
https://stackoverflow.com/questions/14328519/different-in-scope-and-context-in-this-javascript-code

scope has two levels: global scope and local scope.

Global scope refers to variables that are accessible anywhere because they are declared outside of any individual functions or methods — usually at the top of the file. They exist in the global space, ready to be called upon at any time.

let dog = 'good boy';

console.log(dog); // good boy

function showScopeExample() {

let dog = 'bad boy';

console.log(dog); //bad boy

}

showScopeExample();

console.log(dog); //good boy

Local scope refers to variables that are accessible within the boundaries of their function. In this example, we have our initial declaration of the variable dog at the top of our file, which is assigned to the string of “goodBoy.” Immediately below, we console.log the dog variable.

As expected, this first console.log prints ‘good boy,’. Then, we have a function of showScopeExample(), which reassigns our dog variable to the string of “bad boy”.

Our re-declaration of dog inside of showScopeExample() is locally scoped. The easiest way to know this is to look at its location. The re-declaration lies in between opening and closing curly brackets, which act as barriers to the relevancy of these variables.

Limiting the accessibility of the variables declared inside of functions allows us to reuse variable names that may apply to separate parts of our code. Locally scoped variables also prevent our code from having tens or hundreds of global variables floating around the global space unnecessarily. It’s also good practice to exercise proper abstraction in our JavaScript by limiting access to variables to areas where they are needed.

In other words, Scope defines the way JavaScript resolves a variable at run time. There is only two scopes in JavaScript — global and function scope. Moreover, it also deals with something called “scope chain” that makes closures possible.

Context

Context refers primarily to the use of the keyword ‘this’. The value of ‘this‘ depends on where it is being invoked.

First Rule – Invoking this in the global space will return the entire window object. This is because the window object is the starting point of all the code we write.

But what happens if we invoke this somewhere other than the global context?

Second Rule – If we invoke this in the context of a new object, it will return that object, just as it returned the entire window object.

let newContextObj = {

key: "testing 1 2 3",

myFunc: function() {

console.log('this is my function');

invokeThisInNewContext() {

return this;

invokeTwo() {

return "testing 1 2 3";

}

} // create an object literal

newContextObject.invokeThisInNewContext();

It returns the entire newContextObj. When it is invoked in the context of an object, ‘this‘ will refer to that object.

Third Rule – In JavaScript, we use classes (or function constructors) to create multiple instances of objects that share properties, even though those properties may differ in value.
By using new, it will return us an instance, where the ‘this’ is pointing to the instance itself. The ‘this’ is can be referenced within the the class/function constructors and its methods.

Furthermore, a context of a function is the value of this for that function — i.e. the object the function is called as a method of.

function F() {

this.doSomething('good');

}

You can invoke this function in different contexts like this:

obj1 = {

doSomething: function(x) {

console.log(x);

}

obj2 = {

doSomething: function(x) {

alert(x);

}

F.call(obj1);

F.call(obj2);