Understanding var, let and const in Javascript

Variables play an important part in any Programming Language as they act as the containers to store the Data
Variables are pretty much required to perform any operation

Javascript provides three ways of declaring the variables namely:
1) var
2) let
3) const

let's explore each variable type and its use cases.

Var:

var declarations were predominant before the advent of ES6.

var greetings = 'Hello Javascript'

It is one of the easiest ways to declare the variables.
var variables can be re-declared and re-initialized.

However, there are issues with the variables declared using var and which led to new ways of variable declarations

Scope of var:

Scope essentially means where the variable is available to be accessed. Variables declared as var are global scoped or function/local scoped.

var globalVar = 'Welcome to my blog';

function readBlog() {
  var localVar = 'You are reading Crazy Js';
}

console.log(globalVar); // 'Welcome to my blog'
console.log(localVar); // Reference Error: localVar is not defined

Here, the variable globalVar can be accessed anywhere across the program as it does not reside inside any function and is a globally scoped variable.

whereas the localVar declared inside the function cannot be accessed outside.

Issues with var

• Variables can be re-declared and re-initialized with var:

When a variable is declared using var it can be re-declared and its value can be modified.

var greetings = 'Hello World!';
var greetings = 'Hello Javascript';

as the variable with the same name is redeclared in the same scope it confuses.

• Hoisting in var:

Variables declared as var can be accessed before they are declared this is possible because of a special feature called Hoisting.

console.log(greetings); // undefined
var greetings = 'Hello World!';

• var exists beyond the block in which it is declared:

Variables declared as var exist beyond the block in which they are defined if not defined inside a function.

if (true) {
var a = 'Hello'
}

console.log(a);

let:

let is now preferred variable declaration and comes as an improvement to var declarations.

let greetings = 'Hello Javascript'

Scope of let:

Variable declared as let is block-scoped.

A block is a chunk of code that resides in {}.
let variables defined inside a block cannot be accessed outside it.

function greetings() {
    let greetings = 'Hello Javascript'
}

console.log(greetings); // Reference error

Improvements over var:

• let variables can be updated but not re-declared

let greeting = 'hello'
greeting = 'Hi, Instead'

console.log(greeting); // 'Hi, Instead'

this will result in an error

let greeting = 'Hello';
let greeting = 'Hey'; // this will result in an error

However, if the same variable is defined in different scopes, there will be no error.

• Hoisting of let let variables are also hoisted but unlike var, let is not initialized as undefined and cannot be accessed until some value is assigned to let variables.

console.log(greeting); // results in a reference error.
let greeting = 'Hello';

const:

const variables are used when we need to assign a constant value to a variable. const variables must be assigned with a value as soon as they are declared.

const greeting = 'Hello';
console.log(greeting); //Hello

Scope of const:

const variables are block-scoped similar to let.

function greetings() {
    const greetings = 'Hello Javascript'
}

console.log(greetings); // Reference error

Improvements over var:

• const variables cannot be updated or re-declared

const greeting = 'hello'
greeting = 'Hi, Instead' // syntax error

• Hoisting of const const variables are also hoisted but unlike var, const is not initialized as undefined and cannot be accessed until some value is assigned to const variables.

console.log(greeting); // results in a reference error.
const greeting = 'Hello';

Got any questions or suggestions? let me know
Thanks for reading :)

Comments

[Nico Delgado]

Hi!, I think it's always better to avoid using var unless we are dealing with legacy code that you need to maintain without refactoring.

[Azhar Ahmed A]

yeah true,
its better to avoid using var

[Azhar Ahmed A]

yup, we can say that

thanks for reading:)