Scope of variables

Previously, we have declared all variables with the help of let and const without really thinking twice. Now it's time to learn more about var and get acquainted with the global and local scopes of variables.

Local scope

When we create a variable inside a function or block of code, we create a local variable available only within a certain part of the code but not in the entire program.

Let's look at the example:

function someFunc() {
  let someVar = "local";
  console.log("Some variable in local scope – " + someVar);
}

someFunc();
console.log("Some variable in global scope – " + someVar); // Uncaught ReferenceError: someVar is not defined

When we call a function, we can access the variable and display its value on the screen. However, a variable declared inside the function is unavailable outside of it. Therefore, the someVar variable is local, in other words, it belongs to the local scope.

Local variables, in their turn, can have function and block scope. A variable declared with var is available inside the whole function and has a function scope. The variable may also be available just in the block of code between { and }; this variable is declared with let and has a block scope.

We can have several blocks of code in one function:

function someFunc2() {
  let funcVar = "function scope variable";
  console.log("Some variable in function local scope – " + funcVar);
  if (funcVar == "function scope variable") {
    let block1Var = "some variable in block local scope";
    console.log(funcVar + 'is available in if block as ' + block1Var);
  } else {
    let block2Var = "some variable in another block of code";
    console.log("In else block is available " + block2Var + " and " + funcVar);
  }
}

someFunc2();

As you can see, we can access a variable declared in an external function from the internal if and else blocks of code.

Global scope

A global variable is accessible from anywhere in the program, not just a particular block of code. Here is an example:

let someVar = "global";

function someFunc() {
  console.log("Some variable in local scope – " + someVar);
}

someFunc();
console.log("Some variable in global scope – " + someVar);

We will get the following output:

Some variable in local scope – global 
Some variable in global scope – global

The someVar variable is global because it can be called from anywhere in the program, not just in the function where it was declared.

If a variable is declared without a special keyword it's considered a global variable by default, no matter where in the program it is declared. For example, try this in the console:

function someFunc() {
  someVar = "global";
  console.log("Some variable in local scope – " + someVar);
}

someFunc();
console.log("Some variable in global scope – " + someVar);

You'll see that the output will look like this:

Some variable in local scope – global
Some variable in global scope – global

Priority of variables

Local and global variables differ in their priority; it is higher for local variables. Let's consider the following example:

someVar = "global";

function someFunc() {
  let someVar = "local";
  console.log("Some variable in local scope – " + someVar);
}

someFunc();
console.log("Some variable in global scope – " + someVar);

As a result, we'll get the following:

Some variable in local scope – local
Some variable in global scope – global

Even though the variable someVar in a global scope was declared earlier when we accessed the variable someVar inside the function, the local variable is received because of the priority of local variables.

let vs. const vs. var

Apart from let, there are two more identifiers for declaring variables: const and var.

Unlike with the let identifier, the variables declared with const cannot be overridden. See the example below:

const someVar = "constant variable";
someVar = "mutable variable";

We will get TypeError.

In earlier versions of JavaScript, it was customary to use var to declare a variable. However, today, this method is obsolete. As we said above, the variable declared with var is available inside the whole function and has a so-called function scope. For example:

function someFunc() {
  var i;
  for (i = 0; i <= 5; i++) {
    var someVar = i * i;
  }
  console.log(i);
  console.log(someVar);
}

someFunc();

Here, we will get the last values of i and someVar.

function someFunc() {
  let i;
  for (i = 0; i <= 5; i++) {
    let someVar = i * i;
  }
  console.log(i);
  console.log(someVar);
}

someFunc();

If you try to access someVar, you will get ReferenceError. It happens because the let identifier has a block scope, so the variables are accessible inside the block of code, between the {} brackets.

Conclusion

In this topic, we've examined what the local and global scopes are, found out that the local variables can have function or block scope, looked at different ways of declaring variables and how they may differ in their scope.