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…