JavaScript Variables

A variable in JavaScript is a place where we can store some data and use it later in our program. We can store a name, age, number, text, or many other types of data inside a variable. For example, let name = "John"; stores the name John and let age = 20; stores the number 20. We can then use these values whenever we need them.

let name = "John";
let age = 20;

console.log(name);
console.log(age);

JavaScript has three keywords for creating variables: let, const, and var. They all create variables, but the way they work is different.

let, const and var

let

let is used when we want to create a variable whose value can be changed later. For example, if a person's age is 20 today and becomes 21 later, we can use let.

let age = 20;
age = 21;

console.log(age);

This is allowed because let variables can be reassigned. But we cannot declare the same let variable again in the same scope.

let age = 20;
let age = 21; // Error

So we can simply remember let = the value can be changed.

const

const is used when we don't want to reassign a variable after creating it. For example, if we create a variable for a value that should not be replaced, we can use const.

const pi = 3.14;
pi = 3.14159; // Error

A const variable must also have a value when it is created, so this will give an error:

const age; // Error

One thing that can be confusing is arrays and objects. A const array or object can still have its contents changed.

const fruits = ["Apple", "Banana"];

fruits.push("Mango");

This works because we are changing the contents of the array, not assigning a completely new array to the variable. But trying to replace the whole array will give an error.

fruits = ["Orange"]; // Error

So we can remember const = the variable cannot be reassigned.

var

var is the older way of creating variables in JavaScript. It can be reassigned just like let, and it can also be declared again with the same name.

var age = 20;
age = 21;

var age = 22;

This works without an error. However, this old behavior can sometimes cause unexpected problems, especially in larger programs. Because of this, modern JavaScript normally uses let and const instead of var.

Scope

Another important difference between these three is scope. Scope simply means the area of the program where a variable can be accessed. let and const are block scoped, which means they only work inside the { } block where they were created.

if (true) {
    let x = 10;
    const y = 20;
}

console.log(x); // Error
console.log(y); // Error

But var does not follow block scope in the same way.

if (true) {
    var x = 10;
}

console.log(x); // 10

This is one of the important reasons why let and const are safer and easier to work with in modern JavaScript.

Common Errors

There are a few common errors that can happen when working with these variables. If we try to declare the same let or const variable twice in the same scope, JavaScript gives a SyntaxError.

let x = 10;
let x = 20; // SyntaxError

If we try to use a let or const variable before its declaration, we get a ReferenceError.

console.log(x);
let x = 10; // ReferenceError

This happens because let and const have a period called the Temporal Dead Zone, where the variable exists but cannot be accessed before its declaration.

var behaves differently because of hoisting.

console.log(x);
var x = 10;

This does not give a ReferenceError. It prints undefined. The declaration of var is hoisted, but its value is assigned only when JavaScript reaches the assignment.

We can also get a TypeError when we try to reassign a const variable.

const x = 10;
x = 20; // TypeError