The document discusses JavaScript scope, lexical scope, and hoisting. It defines three types of scope - global, local (function and block), and lexical scope. Lexical scope means that variable lookup follows the structure of nested functions and blocks. The document also explains that before code execution, variable and function declarations are stored in memory according to their scope due to a process called hoisting.

1. JS Scope, Lexical Scope,
Hosting Concept

2. What is Scope?
Scope means lifespan of a variables. It determine accessibility/visibility of the variables
inside the JavaScript code. There are three types of scope.
● Global
● Local
● Blocked(ES6)

3. Global Scope
The variable which is declared in the global
execution context is called Global Scope. Global
Scope variable can accessible from anywhere
within the code.

4. Local Scope
Locally scoped variables are only visible and accessible within their local scope. There are 2
local scopes.
1. Function
2. Blocked

5. Function Scope
The variable which is declared inside the
function is called function scope. The function
scope variable cannot be accessed or modified
outside the function. For example:
In this example, variable “a” is a local scope of
function func(). It can be accessible only inside
of function func() not in outside of the func()
function. It will throw an error if we try to access
function scope outside of function.

6. Block Scope
The variable which is declared inside the curly
braces (If, for, while loops) called block scope. The
block scope variable can be accessed only within
the block of code not outside of the curly braces.
“Let” and “const” keywords used to declare the
block scope variable.
In the example, b and c are blocked scope variable
which we cannot access or modify outside the curly
braces. When we try to access the variable b and c,
it throw an reference error.

7. Lexical Scope
Scope means, the set of rules that govern how the engine can look up the variable by its identifier . The
lexical scope is defined in compiler phase. When JS engine execute the variable in the code, it look up the
variable in current scope. If it’s not available in current scope, then JS engine goes level one up and then
look up the variable in outer scope. If it’s not available in the outer scope, then it will goes one level up again
until it reach global scope. If it’s available in global scope, then it will return the value otherwise it will return
reference error.

8. Lexical Scope

9. Lexical Scope
In the above example,When JS engine execute console.log(a), it starts lookup variable “a” in the current
scope (innerFunc scope). Since the variable “a” is not available in the scope, JS engine goes one level up
and lookup the variable “a” in outer scope (outerFunc scope). Since the variable “a” is also not available in
the outer scope as well, so the JS engine goes level up again and look up the variable in global scope. The
JS finally finds the value a in global scope and then JS engine return value 5 and display it in log. If variable
“a” is not defined in anywhere in code, then it will return “ “ReferenceError: a is not defined” error.

10. Hoisting
Before we get into hoisting topic. What you think about below code block

11. Hoisting
Before JS engine execute the code by line by line, it
scan entire code once and if it’s finds a variable start
with “var” keyword, then it store that variable as
“undefined” in memory under the current scope. If JS
engine finds function declaration starts, then it
stores entire function declaration in memory under
the current scope.
Let consider this code,

12. Reference:
1. https://medium.com/@a.mahesh06/js-scope-lexical-scope-hoisting-concept-ca6b08c6eaf
2. https://medium.com/@a.mahesh06/how-javascript-execution-works-is-js-a-compiler-or-
interpreter-540e4f829582
Code Snippet :
1. https://carbon.now.sh/?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=a11y-
dark&wt=none&l=javascript&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56
px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&c
ode=1%2520console.log(a)%253B%2520%250A2%2520var%2520a%2520%253D%25205
%253B%250A3%2520function%2520func()%257B%250A4%2520%2520%2520console.lo
g(b)%253B%250A5%2520%2520%2520var%2520b%2520%253D%252010%253B%250A
6%2520%257D%250A7%2520func()%253B
2. https://snipit.io/lists/0/34819

13. Thank you
- Santhosh Kumar S