JavaScript : Variables & Scope

Variable is a fundamental concept of programming. A variable is a container that stores a value or data. It is a named unit of data that is assigned a value.

Variables in JavaScript are different compared to other programming languages such as C and C++.

JavaScript is a weakly typed language. It means that you do not have to specify the type for a variable declaration.

The scope is a policy that manages the availability of variables throughout the program.

In JavaScript, variables can be created in three ways, these are:

• var
• let
• const

var

Before let and const were introduced there was only one method for variable declarations i.e var. Var is a keyword that is used to declare or optionally initialize a variable.

e.g: var name;

When a variable is declared using var then by default undefined is assigned to that variable. In this case, the name contains a value undefined. If you initialize a variable then it will contain the assigned value.

e.g: var character = "Joseph Joestar"
In the above example, the variable character contains a string value i.e "Joseph Joestar"

Var statement declares a globally scoped variable. This means that a variable declared using var is available in the global context i.e throughout the program.

In the above example, we initialized the var variable with value as Joseph Joestar. This variable is now available in the global context of the program. We have also created a function changeCharacter that reassigns the value to the variable and then outputs it to the console. After executing the function, the value that will be printed to the console is Dio Brando.

Now, if we print the variable outside the function, it will still print Dio Brando instead of Joseph Joestar. Even though we have changed the value only inside the function still is printing the same value outside the function scope. This happens because var creates a globally scoped variable. The change is reflected globally thus we get this output.

This type of situation may create confusion while writing large components so you should avoid using var as much as possible. So what should we use instead of var?
ES6 introduced two new ways to create variables i.e using let and const.

let & const

As we saw earlier that var declares globally scoped variables which may lead to issues if not used properly. This problem can be solved using let & const.

The variables created using let and const are block-scoped. A block is everything inside two curly braces i.e {}.

e.g: let name or let name = "JOJO"

In the above example, we have created a new variable inside a function using the let keyword. This name variable is now block-scoped hence exists only inside that function. If we print it outside the function it will output Reference Error: name not defined to the console because name variable is not present in the global scope.

const is similar to let. It creates a block-scoped variable. The only difference is that you cannot reassign a new value to the const variable. The variable declared using const has a constant value. You cannot re-assign or re-declare value to the const variable, otherwise, it will throw Type Error: assignment to constant variable error.

var is always hoisted in JavaScript. You can use the variable declared using var before its actual declaration.

let and const are also hoisted but they are not initialized.