Learn JavaScript : Global and Local Scope (Part 3)
Introduction
The concept of "Scope" in computer programming, can be understood in terms of the accessibility of data. In simple terms let's consider this scenario; As a Coder, consider that you code in blocks of code and that anytime you create a function or a variable outside a block of code like a function or class, it is called a global scope and when you define and declare variables and functions within a function or a class or any block of code it is called a local scope.
Kindly study the following Parts in case you had skipped them.
Now, consider the global scope and local scope as contextual. Meaning data created in a global scope is different from data created in a local scope. But in a programming setting, data created in a global scope is mostly accessible in a local scope context or block.
How scopes behave may be different in other programming languages. Especially with the process of how data in a local scope is made accessible to a global scope.
Practical examples
JavaScript global scope
// Global Scope
let a = "hello world";
function say() {
console.log(a);
};
say(); // hello worldKindly take note that the double forward slash in the first line of code is a comment, this means that the browser's interpreter does not execute whatever a computer programmer may write there, as this is meant for humans to read so that they can understand what the below JavaScript syntax is meant to do.
The second line of code is where we initialized a variable, which is a global scope variable since it was created outside of a function.
The function we created bearing the name "say()" would set another block of code that serves as a local scope. Which starts from where the curly braces begin and end. But the point to be established from creating a local scope is to learn that a variable created in the global scope can be accessed from the local scope. This is why the variable "a" having the value "hello world" could be printed out into the developers console using the console.log() built-in function, as you can see the variable name "a" was repeated in the local scope (accessing the data in the global scope).
The last line of code is where the function with the name say() was being called. Do not worry if you do not understand what a function means, you would understand functions as you keep following this JavaScript tutorial series. So when the function was called it outputs in the developer's console with the information "hello world".
JavaScript local scope
// local scope
function say() {
let b = 3;
};
// trying to access the data from the local scope
console.log(b); // Uncaught ReferenceError: b is not defined
In the above script, we created data in the local scope, thus a variable "b" having the value 3 and later tried to access this data within the global scope. You would realize this created an error saying ;
Uncaught ReferenceError: b is not defined
This is because the variable b was created in a different context which makes it a bit difficult to access that data.
How to access data from a local scope
There is actually a way to access data from the local scope since this may become needed in the system you may be developing. To do this you need to use the window built-in object in JavaScript.
// Accessing data from the local scope using the window object
function say() {
window.b = 3;
};
// trying to access the data from the local scope
console.log(b); // 3The above script shows how to access data from the local scope using the window object in JavaScript. You would realize that instead of using the let, const or var keywords to create a variable, we used the window object to create a variable, creating variables this way would make them accessible in both other local scopes and global scope.
Conclusion
Understanding global and local scopes in computer programming gives you a good chance to control how data flows within your system and even how to restrict some data to a certain context if need be. Scopes also help you to put certain codes or instructions in various kinds of blocks or contexts in order to make your code appear organized and beautiful.
Comments
Post a Comment