JavaScript Variables: var, let, and const

A variable is considered a container that can contain values of different types, these values can be numbers, characters, boolean, strings, etc. The value a container contains can access by its name and hence naming a variable is also an important aspect of JavaScript programming.

This tutorial will teach you everything including the process of declaring variables, differences between multiple variables, initializing variables, changing their values, rules of naming variables and more to make you master the concept of JavaScript Variables.

Also Read: JavaScript Strict Mode: What it Does and Doesn’t Allow

JavaScript Declare Variable

In JavaScript the concept of variables is different from other programming languages, you don’t have to define the data type of a variable when declaring it.

A variable can be declared in JavaScript using three keywords, var, let, and const.

Declare Variable using the var keyword

Declare Variable using the var keyword is a traditional way, it is mainly used in older versions of JavaScript, using the var keyword to declare a variable has many cons, the variable declared using the var keyword is not considered as block scope, which means it can be accessed outside of a block in which it is declared, this can cause many security issue and bugs as sometimes we knowingly want that a variable is not accessible outside.

However, many browsers don’t support the let keyword(which we will discuss later), in that case, a var can be a better alternative.

Syntax:

var variableName;

where variableName is the name of the variable used to assign and access value to it.

Declare Variable using the let keyword

The let keyword is introduced in ES6, which is considered modern JavaScript, the let has many advantages over var, as it is block scope and it is usually recommended to use for declaring variables in JavaScript.

Syntax:

let variableName;

where variableName is the name of the variable used to assign and access value to it.

Declare Variable using the const keyword

The const is also introduced in ES6, just like let, the variable declared using the const keyword is also considered as block scope, the only difference is that, once a variable is initialized using the const keyword it is immutable(don’t worry we have discussed this later in this tutorial) and it is considered as a constant.

Syntax:

const variableName = value;

where

constantName is the name of the constant,
value is the data that will store in constant

Note: A constant declaration must be initiated.

In the above section, we have discussed block scope, the scope is an essential concept to better understand the variable. We have a separate tutorial on Scope in JavaScript, consider reading it.

Rules of Naming JavaScript Variables

Following are the rules one should keep in mind when naming a variable.

JavaScript reverse words can’t be used as the variable name.
It can’t start with a number, a variable name should start with a letter, underscore(_) or a dollar sign($).
Variables names are case sensitive, i.e., the variables having name num and Num are considered different.

Initialize Variable in JavaScript

A value can be assigned to a variable using the Assignment Operator(=).

Below is an example of assigning value to the variables.

var varVariable;
let letVariable;

varVariable = 1;
letVariable = 1;

console.log(varVariable);
console.log(letVariable);

Here we have assignment 1 to each variable and print its value using the variable name.

Output:

1
1

Change the value of a variable

The value of the variables can be changed later on, however, the value of the variable declared using the const keyword is immutable, which means it can’t be changed as it is considered a constant, and constant value can’t change.

var varVariable;
let letVariable;

varVariable = 1;
letVariable = 1;

varVariable = 2;
letVariable = 2;

console.log(varVariable);
console.log(letVariable);

Output:

2
2

Here you can see the value is updated.

Let’s try changing the value of a constant variable.

const constVariable = 1;

constVariable = 2;

console.log(constVariable);

Output:

constVariable = 2;
              ^

TypeError: Assignment to constant variable.
    at Object.<anonymous> (C:\Users\ag290\OneDrive\Desktop\variable\app.js:12:15)
    at Module._compile (internal/modules/cjs/loader.js:759:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at Function.Module._load (internal/modules/cjs/loader.js:555:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:826:10)
    at internal/main/run_main_module.js:17:11

See, we got an error, hence it is justified that constant variables are immutable.

Summary

JavaScript Variable is a way to store values, it is considered as a container that can contain data that can be accessed later using its name. Variables can be declared using var, let and const keywords. The value of var, and let can be changed later, but the variable declared using const is immutable, i.e, it can’t be changed. Hope this tutorial helps you to understand the variable in JavaScript.