Global Variable in JavaScript ( with Codes )

Variables are simply, named memory locations. The scope of a variable defines from where we can access a variable within the code, which can be global or local. In this article, we will look into the global variables in JavaScript. Let us get started!

What Are Global Variables in JavaScript?

Global Variables in JavaScript are the variables that can be accessed from anywhere within the code. They are usually declared outside the code blocks of functions. They have a global scope.

A variable can be global, that is, it can be accessed from anywhere in the code, or can be local, i.e. accessible only in a particular code block. The lifetime of a global starts from its declaration until the end of the program, while local is limited to the execution of the function or block in which it is declared.

Declaring & Accessing Global Variables

We simply declare the global variables outside of any functions or code blocks. This allows them to be accessed from anywhere. Let us see an example of the same:

//declaring a global variable
var globalVar1=4;

//code block
{
    console.log("Hello FavTutor");
}

//declaring another global variable
var globalVar2="Komal";

//declaring a function
function greet(){
    console.log("Hello");
}

In this example, we have taken two global variables. It is important to note that although the second variable globalVar2 is a global variable, it can only be accessed from the code that is below it. We cannot access it in the code above it because it has not been declared there. It is accessible from the point below its declaration.

We know that once it is declared, it can be accessed from anywhere, function, or scope within the program. To access it, we simply refer to them by their name. This accessibility feature of global variables makes them highly useful and allows them to be used across different parts of the code.

Check the code to know how to access it:

var globalVar1=4;

//code block
{
    console.log(globalVar1);
}

var globalVar2="Komal";

//declaring a function
function greet(){
    console.log("Hello "+globalVar2);
}

//calling the function
greet();

Output

4
Hello Komal

In this example, we have taken two global variables. As shown in the code, we have accessed one inside a plain code block and the other inside a function. The output shows that we can access the it from anywhere, Thus, we have obtained the desired output.

Modifying Global Variables

As these variables are accessible from anywhere, they can be modified from any part of the program as well. We can change the value of a variable from within a function or block easily because it is accessible in a function or code block.

Let us see an example:

//declaring a global variable
var globalVar1=4;

//code block
{
    //accessing the global variable within the code block
    console.log(globalVar1);
    //modifying the global variable within the code block
    globalVar1=2;
    //printing the modified value
    console.log(globalVar1)
}

//declaring another global variable
var globalVar2="Komal";

//declaring a function
function greet(){
    //accessing inside the function
    console.log("Hello "+globalVar2);
    //modifying inside the function
    globalVar2="John";
    //function statement 2
    console.log("Hello "+ globalVar2);
}

//calling the function
greet();

Output:

4
2
Hello Komal
Hello John

In this example, we have declared two global variables and accessed them within the code block or the function. We have also modified their values in the code block and the function which results in the correct output. Thus, we have obtained the desired result.

Benefits & Limitations

Now let’s at some of the advantages that every programmer must know about:

Accessibility: They can be accessed from anywhere within the program. This makes them suitable for storing data that has to be shared across multiple functions or code blocks.
Simplicity: They provide a straightforward way to store and retrieve the data. There is no need for complex data-passing mechanisms.
Code Reusability: By using global variables, we create reusable and modular code that can be easily adapted and extended.

But there are some limitations as well. Excessive usage can lead to code complexity and decreased maintainability. Sometimes, naming conflicts can also cause errors or security vulnerabilities. Therefore we need to plan naming conventions before

Is it Good to use Global Variables in JavaScript?

As mentioned, Variables in the global scope can lead to namespace pollution, which means that any part of the code uses the same variable names and interferes with each other. As the size of your code increases, this makes it harder to maintain. So, proper testing is required when using them.

Still, they may be used to store program constants and common configuration settings that need to be accessed throughout the entire application. However, it is always recommended to use local variables most of the time. You can use modern JavaScript features, such as const and let instead of var for variable declarations for better code structure.

Do Global Variables slow down code?

While global variables can’t slow down the speed of code execution in any way, they can lead to performance issues. But from the limitations mentioned above, you must consider how it can lead to more time in code development and maintenance. You should adopt practices that encourage encapsulation and modular design.

Conclusion

In this article, we explored the concept of global variables in JavaScript. We dived deep into how to declare, access, and modify them. If you face any errors because of such issues, our expert JavaScript expert can help you online.