JavaScript Global Variables – How to create and access them in JS?

In this article, we are going to see what JavaScript Global Variables are and how to access them in JS. So Let’s start with our first topic which is what are JavaScript Global Variables. Be ready to learn something new from this article. Don’t forget to visit Codedamn for learning and amazingly practising coding!

What are JavaScript Global Variables?

Global variables in javascript is the variables which are accessible anywhere in our program or variables which are declared at the top of the file. This means you can use global variables it in your code wherever you want. You don’t need to think about block scope or functional scope when you create global variables. Or in other words, variables which are not inside any block e.g. function block, if-else block, or class constructor block.

As shown below inside the code block.

const globalVariable = 'Hey I am global variable'; // this is a global variable.
console.log(globalVariable); // accessible here!

if(globalVariable) {
    console.log(globalVariable) // accessible here also!
}
Code language: JavaScript (javascript)

In the above code example, I have created an variable at the top of the code block and assign the value of a string to it. And what I am doing in the next line is logging that variable to the console. This is nothing special right, but this will make sense when we compare a global variable with the local variables just wait.

Global variables vs Local variables in JavaScript

Let’s compare what is the difference between global variables and local variables.

Global variables

To create global variable we need to declare the variable outside of any blocks or at the top of the file. and the global variables we can access it anywhere in our program.

As shown in the following code example.

const globalVar = 20;

const checkGlobalVar = () => {
    if(globalVar) {
        console.log(globalVar); // it will log 20 on console.
    }
 console.log(globalVar); //it will also log 20 on the console.
}

console.log(globalVar); // same here!
Code language: JavaScript (javascript)

Example explanation

In the above code example, What I am doing on the first line I have created a globalVar variable which is a global variable. As we discuss what are global variables I think you should know them up until this point what they are. And then on the next line, I created a checkGlobalVar function also inside that function I have created an if block and then I’m using that globalVar variable there. I can use that variable there because it is a global variable.

And it will happen two more times because after the if block finished I’m logging the globalVar and after the function block, I’m again logging the globalVar to the console. So this is how we can create and use global variables.

Local Variables

In JavaScript, there is another type of variable which is the Local variable. And what the Local variable is? So the variables inside any block, e.g. Function block, if-else block, or loops block are Local variables. We cannot use them outside the block in which they are.

As shown in the example below.

const checkLocalBlock = () => {
    const local1 = 13; // it is a local variable of the function block.
    if(local1) {
        const local2 = 16; // it is a local variable of the if block.
        console.log(local2); // output 16.
    }
    console.log(local1); // accesible here.
    console.log(local2); // will throw an error local2 is not defined.
}

console.log(local1) // it will also throw an error local1 is not defined.
checkLocalBlock();

Code language: JavaScript (javascript)

Example Explanation

In the above code example, I first created a checkLocalBlock function and inside that, I created a local1 variable and assign a value of 13 to it. So the local1 variable has now become local variable of the checkLocalBlock function. And then on the next line, I created an if block inside that if block I created another local variable local2. And again local2 variable has now become local variable of the if block.

And when we try to log the local variable outside of the block where they have been created, we get an error. It happens when we try to use a local variable outside of the block where they have been created. So this is how local variables work.

Conclusion

In this article, we learned about what are JavaScript Global Variables, and how to create and access them. We also compare the difference between Global and Local variables. And see the code examples and understand how they work.

Do visit Codedamn for exploring learning paths to become an amazing developer. And do practice on the Playgrounds for developing your coding skills.