Scope, Variable, and Hoisting
Scope determines the accessibility or visibility of variables.
Traditionally, JavaScript has two types of scope: global and function.
ES6 has introduced a new type of scope: the block scope. Typical examples of the block scope include the IF statement, the FOR statement, and the WHILE statement. An object literal is not a block scope, thought it looks like one.
Scopes are entry-only. An inner scope has full access to everything from its outer scope. But an outer scope cannot access anything from its inner scope.
By defining a variable in a smaller scope, we can limit its accessibility to a smaller range, protecting its value from being read or overwritten by unwanted parties. It also helps avoid naming collisions, as a smaller scope has fewer variables and the same variable can be used in different scopes.
There is only one global scope; but you can set as many function and block scopes as you want. Function and block scopes allow you to divide the global scope into smaller sections.
Every scope has a THIS. By default, THIS from all kinds of scopes point to the global object. In the browser environment, the global object is the Window object.
THIS of a full function scope can be redirected. This is a very important feature. Vue, or any JS…