Like many others programmers when start with javascript in a self-taught way we find a very recurrent word around us "scope", and as expected the first thing we do is go to the source of all the answers The great Google of course, we search what is Scope or variable scope?.
But this is kind of confusing and not very clear; so, let me explain what is the "Scope" and how this works inside JavaScript.
What is the scope of a variable?
Scoping is determining where variables, functions, and objects are accessible in your code during runtime. This means the scope of a variable(where it can be accessed) is controlled by the location of the variable declaration.
There are two scopes in JavaScript, the Global scope and Local scope, when we start programing in JavaScript there is a moment when "referenceError:" starts to pop up and the main reason of this is because of the scope, when you are debugging, if you can understand how the global and local scope works you will be more efficient when debugging and you'll be able to handle most of the reference and declaration errors.
The global scope:
There is only one Global scope throughout a JavaScript document. A variable is in the Global scope if it’s defined outside of a function.
As you see in the above code, the variable "glovalV" is declared in the global scope because is not inside a function, you can go and test for yourself declaring and logging variables inside and outside a function and check what errors you find.
"You can also access and alter any variable declared in a global scope from any other scope."
The local scope:
Variables declared within a function are in the local scope. Local scope is also called function scope because local scope is created by functions in Javascript. Variables in the local scope are only accessible within the function in which they are defined, i.e they are bound to their respective functions each having different scopes. This allows us to create variables that have the same name and can be used in different functions.
In JavaScript, variables with the same name can be specified at multiple layers of nested scope. In such case local variables gain priority over global variables. If you declare a local variable and a global variable with the same name, the local variable will take precedence when you use it inside a function. This type of behavior is called shadowing. Simply put, the inner variable shadows the outer. This is how the Javascript interpreter finds a particular variable; it searches for the variable at the innermost scope being executed at the time, and continues until the first match is found, even if there are other variables with the same name in the outer scope.
In conclusion
Understanding the scope can be a little confuse at the beginning but what I recommend is playing with the code and console.log the content of variables and function calls, I hope this was a little help in the understanding of JavaScript, in my next post I'll talk about the block scope related with the reserved word "let" in the ES6 or ECMAScript2015 JavaScript specifications.
Top comments (0)