What Are The Scope Levels
Well, to start things off, in JS there are three levels of scope to always keep in mind: global, function, and block. For the most part, any application you build will live off of utilizing these three scope levels.
The global scope is just that, globally accessible. Anything defined here can be accessed from any other scope level as long as its initialized before first use. So for the cases when you want a value and/or method easily accessible across your application, this is where it would live.
Function scope is the next one down the ladder. Unlike the global scope, function scope is more self-contained. As mentioned before, the definitions you have set up in the parent global scope are available here. However, that relationship only works one way.
Meaning, definitions from inside a function aren’t accessible from outside the function instance. So a function scope will have access to global scope, that’s guaranteed, and access to the scope of the current instance(this) of the function.
For example, say you defined an add method. You call it twice and store whatever is returned into two different variables. For each variable, they have no connection the values or calculations done in the other. They only have reference to its own instance scope and the parent global scope.
Block scope is the smaller of three scopes in JS mentioned here. In short, it has access to any parent scope(function, global, other blocks, etc.), and it’s own block. To visualize this, think of an if condition. In that condition, you are wrapping your logic in between the two brackets. That creates a block scope.
So say you have a let definition in first if you define, and try to access it in your else. What do you think will happen? Reference error of course! That is because that definition is only available in its scope. So to have access to that definition in both, you would need to initialize it at the parent level of both blocks. Being a function or global level scope.
Scopes in JS aren’t that difficult or hard to understand. All it takes is times and going through the growing pains of being in different use cases that best suit a portion of your applicaiton as a whole.
There is defiantly more to go over in terms of scope in JS, and how to best understand and work with it. So be on the lookout for more informative content on that!