Assign Variables, Global Variables and Scopes in JavaScript (let, var, const)

let, var, and const are all JavaScript statements that assign a value to a variable.

Their behavior can differ depending on how and where they are used in your code – read on to find out the details.

Scopes in JavaScript

As you start to build more complex applications, you’ll start to see a lot of talk about scopes. A variable’s scope defines where it is available in your application.

Global Scope (Global Variables)

If a variable is in the global scope, it is available anywhere in your application. It can be called from any function or code block unless a variable with the same name is available in said function or code block’s scope.

For example:

var myString = "hi!"; // Declaring a global variable

function sayHi(){
    console.log(myString); // Accessing the global variable myString from within a function
}

sayHi(); // Will output "hi!"

The Module Scope

If you use JavaScript modules, global variables within the modules are not available outside of them.

They must be exported from the module and then imported. This, however, is best left to an article about modules!

Function Scope

The function scope means that a variable is available only within a given function:

var myString  = "goodbye!"; // Declaring a global variable

function sayHi(){

    var myString = "hi!";// Declaring a function scoped variable for use within this function.

    console.log(myString); // Accessing the function scope variable myString from within a function
}

sayHi(); // Will output "hi!"

Block Scope

The block scope is the most local of scopes. Variables declared in a block (any code contained within {} curly braces) are available only to code within the same set of curly braces.

var myString  = "goodbye!"; // Declaring a global variable

if(true){
    let myString = "hi!";
    console.log(myString); // Will output "hi!" as it is accessing the myString variable in the current block scope
}

console.log(myString); // Will output "goodbye!" as it is outside of the above block, so it reads the global variable

Declaring Variables with var

Declaring a variable with var is the old-fashioned JavaScript way. It looks like this:

var myNumber = 3;

Scope of var

Using var outside of a function will make it a global variable.

If used inside a function, the variable will be available within that function – function scoped.

Redeclarability/Immutability of var

Variables declared with var can be re-declared and updated/changed, so the following code is OK to use:

var myNumber = 3;
myNumber = 4;
var myNumber = 5;

Declaring Variables with let

let myNumber = 3;

Scope of let

The let statement will declare a variable for the current block scope:

Redeclarability/Immutability of let

Variables declared with let can be updated but cannot be re-declared, so this is OK:

let myNumber = 3;
myNumber = 4;

..however, this is not OK:

let myNumber = 3;
let myNumber = 4;

Declaring Variables with const

Finally, const can be used to declare constants:

const myNumber = 3;

Scope of const

Like let, const variables are block-scoped.

Redeclarability/Immutability of const

Variables declared with const cannot be updated or re-declared.

Declaring Multiple Variables in a Single Line

You can declare multiple variables using any of the above statements on a single line:

var myNumber = 3, myString = "Hi!", myBool = false;