Understanding Variable Scopes in JavaScript

The scope of a variable refers to where it will live or where it can be accessed. In JavaScript, we have several options: global, local, and block.

But let’s go step by step and see how each one works.

Global Scope

Global variables are accessible anywhere in our code.

This happens because when we create a global variable, it’s instantiated on the window object.

//pruebalo: https://jsbin.com/neravu/edit?js,console

var variableGlobal = 'esto es una variable global';

console.log(window.variableGlobal);

This means we can call them from anywhere in our code.

// pruebalo: https://jsbin.com/koheri/edit?js,console

var variable = 'esto es una variable';

function imprime() {
  console.log(`${variable} llamada dentro de una funcion`);
};

imprime();
console.log(`${variable} llamada fuera de una funcion`);

There are two particular cases where we can create global variables without realizing it.

1. When we want to define a variable inside a function and don’t use var, let, or const for it.

//pruebalo: https://jsbin.com/mahagec/edit?js,console

function variables() {
  variableGlobal = 'Esto es una variable global'
}

variables();

console.log(variableGlobal);

2. When we try to set two variables equal by defining them with a single keyword.

//pruebalo: https://jsbin.com/sizede/edit?js,console

function variable(){
  var variableLocal = variableGlobal = 'Variable Global';
}

variable();

console.log(variableGlobal);

We need to be careful with these cases, since we could be creating side effects by accidentally creating global variables.

Using global variables in our code should be avoided, since they’re stored on window and can be overwritten and/or lead to functions with side effects.

Local Scope

Variables will only live in the function where they’re created. For this, we use the var keyword.

// pruebalo: https://jsbin.com/xatixi/edit?js,console

function variables() {
  var variableLocal = 'esto es una variable local';
  console.log(variableLocal); // esto es una variable local
}

variables();

console.log(variableLocal); //error variable no definina

The local variable will only live inside the function — outside of it, the variable is not defined.

But in the previous article, we saw that we can create functions that take or return another function. Here’s how scope works in those cases:

//Pruebalo: https://jsbin.com/sequho/edit?js,console

function variables() {
  var variable1 = "variable externa";
  // console.log(variable2); //error
  return function() {
    var variable2 = "variable interna";
    console.log(variable1); // variable externa
   };
}

variables()();

In functions that return functions, we can access outer variables from nested functions, but from the outer functions we can’t access internal variables of nested functions.

Block Scope

Since ES2015, we have the let and const keywords, which give us block scope. This means variables will only live within the code block ( {anything inside curly braces is a block} ) where they’re created.

//Pruebalo: https://jsbin.com/samena/edit?js,console

function block() {

  const count = 5;

  for(let i = 0; i < count; i++  ) {
    console.log(i);
  }

  console.log(i); // error

}

block();

The variable i is still in the function’s local environment, but since we created it with let, it’s only available within the loop’s code block.

In upcoming posts, we’ll take a deeper look at how let and const work.

Being clear about where our variables live and are accessible allows us to create pure functions, which is a good thing — it leads to code with fewer bugs. And that makes everyone happy.