Variable Scope in JavaScript: Beginner's Guide

For any code more complex than console logging "Hello world!", variables are necessary for programming in JavaScript. The scope of a variable is the region in which each variable can be called and used.

A few factors affect a variable's scope: where it is initially declared and what declaration keyword is used when initializing the variable.

Variable Types

The three types of declarations are const, let, and var.

const
Const, or constant, variables are permanently set to whatever value they are initially declared with. When a value will not change within the scope of the program (or code block), a const variable is ideal to prevent accidental reassignments. Some common uses for the const variable are for mathematic constants, names (that are unchanging), and for grabbing HTML elements for DOM manipulation (which is what I’ve been using const variables for the most lately). These constant variables can be either block or global scope, depending on where they are declared in your code.

let
Let variables can be reassigned as many times as needed within the scope. Some examples of where this works well are for iterators, variables taking inputs and summations, along with countless others. Let variables, like const variables, can be either block or global scoped.

var
Var is a function-scope variable that is similar to let in that it lets you reassign the variable to any value as many times as needed. The issue with the var keyword is that there is a potential for hoisting, or using the variable before the declaration, which can create bugs related to scope. These can be irritating to debug, so the best practice is to use let or const declarations instead.

Scope

Global
A global variable is declared outside any curly brackets. It belongs to no function, loop, or other blocks of code, which means that every code block in your program will have access to that variable. A global variable can be declared with any declaration: var, let, or const.

Block
A block variable is any variable declared with let or const within a code block. This variable is only accessible within the code block it was declared in. A code block is anything within curly brackets; this could be a function, for loop, if statement, etc.

Function
A function scope variable that is declared with var. It works similarly to a block scope but is only applicable to functions, not other types of code blocks. Noted above, it is typically best to just use a block scope variable in place of a function scope variable to avoid scope related bugs.

Example

const test1 = 1; //constant global variable
let test2 = 2; //not constant global variable
function foo(){
   let test3 = 3; //not constant block scope variable
   const test4 = 4;//constant block scope variable
   let test5 = test1 + 5;//block scope variable using 
                         //globally declared variable
   console.log(test1, test2, test3, test4, test5);
     //returns 1 2 3 4 6, all variables log to console
} 
console.log(test1, test2, test3, test4, test5)
   //returns 1 2 and errors(out of scope) for test3, test4, test5 

The code above shows how each type of variable is declared and how it performs in global and block scope.