Variables are one of the fundamental elements of dynamic programming languages, JavaScript especially. The simplest way to describe the concept in our case is to compare it with the repository containing certain data that can be changed or interacted with. It may look a bit complicated; however, it isn't at all.

Declaring the variable

There are several ways to declare any variables, including global, in JS. You can see different keywords used for this purpose, such as var, let, or const, and all of them are correct. Without detailing the difference between these keywords, let's just note that let and const are relatively newer, while var usually appears in older code examples. They are mutually replaceable in most cases. Let's stop on the let keyword as the most actual and universal one.

let catName = "Oliver";
// We have declared the name and  value of variable

The lifetime of variables starts once it is declared and finishes with closing the browser window or program.

Difference between global and local variables

Variables are usually divided into global and local variables. Basically, a variable declared outside of any function, automatically becomes global. For instance, the one from our previous example was a global variable as soon as it wasn't located in any block or function. You can declare global variables through all keywords mentioned above.

const x = 1; 
//global variable

let color = red;
// also a global variable

var answer = "Yes";
//another one

As you can see, global variables are sort of "default" variables. Considering that, the brief definition of what a local variable is actually has a point. The answer is quite simple - a local variable, in contrast to global, is a variable located inside of function or block. Let's take a closer look.

let numbers ,= [42, 7, 239];
 // global variable
 
 
function getNumbers () {
    let numbers2 = [24, 8, 329];
    return numbers2
    // local variable
}

When it comes to global variables, note that it should have a unique name, unlike local variables. Another important aspect is that local variables inside of their function are prioritized compared to global; that's why skilled programmers always advise you to minimize the usage of global variables and prefer to use local variables if possible.

The last concept we should clarify before moving directly to the particular cases is the scope. So what is the scope, and how is it related to a global variable?

Global variable and global scope

The scope is the area of the accessibility, or visibility of variables. There are three main types of scopes: block, function, and global scopes. The first and the second types of scopes are determined by the limits of block {} and function, consequently. The main principle of this concept is that if a variable is not in the scope, it can not be referenced.

In our case, we are interested in the global scope. The general rule is that the variables declared outside of any function or block (or declared globally) are global and have global scope. The global scope means that variables are accessible from other local scopes by any script or function from anywhere in the program.

Examples

Let's return to our first example and see how it will work together with the hypothetical function.

let catName = "Oliver";
// code here can use catName
 
function functionName () {
    //code introduced here can also use catName
}

catName, in this case, is the global variable with the global scope. The globality of a variable basically means that different functions and scripts can repetitively use it.

const catName = "Oliver"; //global variable
 
function Function1 () {
    console.log(catName); //Function1 prints "Oliver"
}
 
function Function2 () {
    console.log(catName); //Function2 also prints "Oliver"
}

However, let's imagine the situation when you are working inside the function, and you need to declare a variable that will be used later. How can you declare the global variable inside of the function?

  • Automatically global

Even if you do not use any keyword like let, var, or const, for defining the variable and just assign a value to the variable, it will automatically become a global variable. For example, you can assign a value inside the function, and it will still be a global variable with the global scope. However, you should consider that it will work only outside the strict mode.

Note: We do not recommend you skip the statements let, var, and const usage until you study and do not feel fluent in JavaScript.

functionName ();
// you can use catName here
 
function functionName() {
    catName = "Oliver";
    // catName becomes a global variable scoped in the browser or program
}

Here we can see how it works inside of the function.

function Myfunction() {
    var a = 42; // local variable
    b = 34; // global variable
}
 
function Anotherfunction() {
    console.log(a); // 'ReferenceError: a is not defined'
    console.log(b); // print 34
}

  • Strict mode

When it comes to so-called strict mode supported by most modern browsers, undeclared variables are not automatically global. That means that if you repeat the same operation as in the previous example, you will see the error message.

'use strict'
functionName ();
// you can not use catName here
 
function functionName() {
    catName = "Oliver";
    // 'ReferenceError: catName is not defined', catName is not going to be a global variable
}

Conclusion

As you can see, the use of global variables in JavaScript, unlike other programming languages, is quite intuitive and can be shortly described in several straightforward rules:

  1. A global variable is generally the variable that has a global scope and can be accessed from anywhere in the program, by any script or function;

  2. The easiest way to declare a global variable is to use let, var, or const statements outside of any block or function;

  3. Outside of the strict mode, you can just assign a value for your variable without using the statements mentioned above.