Variable declaration in JavaScript

In JavaScript, there are three ways(Keywords) to declare a variable.

1. Const
2. Let
3. Var

1) Const:

When you want to declare a variable that will hold a value that will never ever change in other wards variable declared with const can’t be reassigned.

Note: Const variables are not immutable, But object and array declared const variables can be mutated.

const pi = 3.14;
pi = 1.43; // Will raise an error, pi can't be reassigned
const person = {}, phoneNumbers = ["0123-456-789"];
person['name'] = "SivaMani" // This is Valid, Not an error
console.log(person.name); // SivaMani
console.log(phoneNumbers); // ["0123-456-789"]
phoneNumbers.push("0987-654-321") // This is Valid, Not an error
console.log(phoneNumbers); // ["0123-456-789", "0987-654-321"]

2) Let

When you want to declare a variable whose value will keep change or reassign it later then we can use let.

let today = "Sunday";
today = "Monday"; 
console.log(today); // "Monday", reassignment is allowed with let

3) Var

When you want to declare a variable whose value will keep change or reassign it later then we can use var.

var today = "Sunday";
today = "Monday"; 
console.log(today); // "Monday", reassignment is allowed with var

Wait for a Sec, Both Let and Var has the same definition! writers mistake?

Nah!…

To know the difference we have to know some more things like scoping, hoisting.

Scoping:

Scoping is determining where variables, functions, and objects are accessible in your code during runtime. This means the scope of a variable(where it can be accessed) is controlled by the location of the variable declaration.

The scope of a variable roughly means “where is this variable available in the code”.

If a variable defined outside of a function is in Global Scope,

If a defined inside a function is in Function Scope,

If a variable defined inside a block is in Block Scope.

const name = "SivaMani"; // -- Global Scope
console.log(name); // Sivamani
function getName (){
  var name = "Siva"; // -- Function Scope
  {
     let name = "Ram"; // -- Block Scope
     console.log(name); // Ram
  }
  console.log(name); // Siva
}
getName();
console.log(name); // SivaMani

Hoisting:

Hoisting in JavaScript is a feature in which the interpreter moves the function and variable declarations to the top of their containing scope. It means that variable declarations, wherever they occur, are processed before any code is executed.

console.log(name) // undefined -- But not an error
var name = "SivaMani";
console.log(name) // SivaMani

Above code will execute like below:

var name;
console.log(name) // undefined -- no error raised
name = "SivaMani"; 
console.log(name); // SivaMani

Note: that hoisting only moves the declaration and not the assignment.

Const vs Let vs Var:

• Variables declared with const keyword can’t be reassigned, but with let and var can reassign.
• Var holds function scope but let and const holds block scope.
• Var is accessible before the assignment, Let and Const are not accessible before being assigned.
• Var can be re-declared, Let and Const can’t be re-declared in the same scope.
• Const variables are not immutable, But object and array declared const variables can be mutated.

!!Happy Coding 👩🏻‍💻!!..

Sponsor me for a book 📖