You can’t really use JavaScript, even your first time, without running into a crash course about its scope paradigm. In a lot of ways, scope in JS is a great concept that gives assurance to the code you write running in an expected manner. However, that assurance can only be felt once you understand scope, for what it is and how it works.
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.
Global
Global scope is what you are first introduced to in your introduction to JavaScript. Think back to that Hello World, or something similar, you did in the beginning of your journey into JS. In all likelihood, you wrote a generic statement to log that string out. Well, in writing that log statement, you wrote something in the global scope. Woo hoo!
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
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
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.
In Closing
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!