Scoping is a fundamental concept to understand when learning to code super early on, why is this? It is because understanding the concept of scopes will ensure you to write more organized code and understanding when and where certain variables can be used and accessed within your code. This ensures that your code is well maintained and is a bug free code. In JavaScript, objects and functions are also variables. Scoping will determine the accessibility of variables, objects, and functions from different parts of the code and where they are located. Here is a simple analogy to understand it a bit more...
Now imagine you're in a big building with many different rooms. The Global Scope is The building's lobby. Everyone in this building can see the lobby, and things placed here can be accessed by anyone in the building.
Now there is a something called a Function Scope where there are specific room's in the building. When you're in a room, you can see and interact with everything inside that room, but you can't see what's in other rooms unless you go into them. Now for the final one which is Block Scope just Imagine you're organizing your stuff in boxes. Each box represents a block scope. When you open a box, you can see and use what's inside it, but you can't access the contents of other boxes unless you open them. Just like in programming scoping in this analogy helps you keep everything organized and prevents mixing up items from different areas. Each scope has its own set of rules and boundaries for what can be accessed. Scope can be better explained and understood by breaking it up to global, local, and block scopes.
Global Scope
The Global Scope in programming refers to the area of a program where variables and functions are accessible from anywhere in the codebase, This means its Accessibility is in every scope and is the outermost scope. The variables and functions declared in the global scope are available to all parts of the program.
In the example above the globalVariable is declared outside of any function or block, making it a global variable. Also The function foo() is able to access the globalVariable even though it's declared outside of the function. This is because globalVariable is in the global scope and can be accessed from anywhere within the program.
Function Scope
The function scope refers to the area within a function where the variables and functions are accessible, any variables declared within the function are now function scoped. Each function creates a new scope. This meaning they are now only visible and accessible within that function. This concept is to ensure no confusion because now that the variables declared within a function do not have any conflict with variables outside of the function.
In the example above localVar is declared inside the foo() function making it a local variable with function scope and also The variable localVar is accessible only within the foo() function. Attempting to access it outside of the function will result in a reference error because it's not defined in the outer scope.
Block Scope
The block scope refers to the area within a block of code where variables are accessible. Any Variables declared inside a { } block cannot be accessed from outside the block.
In the example above the "blockVar" is declared within the if block making it a block-scoped variable, It is inside { } brackets and The variable "blockVar" is accessible only within the if block. Attempting to access it outside of the block will result in a reference error because it's not defined in the outer scope.
Conclusion
Overall Scopes is vital to coding to understanding the visibility and accessibility of variables and functions within a program as well as writing clean, prevent variable conflicts, and organized code. Keep in mind that every function creates its own scope, and any variables or functions you declare inside of the function will not be available outside of it. Always use const and let to declare variable. By understanding and properly utilizing scopes, developers can reduce the likelihood of bugs and improving overall code quality.
Resources
https://www.w3schools.com/js/js_scope.asp
https://developer.mozilla.org/en-US/docs/Glossary/Scope
Top comments (0)