Js scope
Download as PPTX, PDF3 likes407 views
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.
Js scope
- 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.
- 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