var, let and const are keywords that are used to define variables in javascript.

Let's understand the difference between these keywords. We will learn about scope, re-declaration and reinitialization, and hoisting with var, let and const.

var

1. Scope of var

2. Redeclaration and reinitialization

3. Hoisting

Scope of var

var can be global scoped and function scoped.

var greet = "Hi";

function greeting() {
  var hell0 = "Hello";
}

console.log(greet); // Hi
console.log(hello); // ReferenceError: hello is not defined

Why hello is not being consoled here? because var hello is having a functional scope. It can only be accessed within the greeting function, whereas, var greet is accessible as it's in the global scope and that's why we can see its value getting printed.

var variables can be re-declared and updated

var allows us to re-declare or reinitialize the value of a variable within the same scope.

var greet = "Hi";
var greet = "There"
console.log(greet); // There

var greet = "Hi";
greet = "There"
console.log(greet); // There

Hoisting of var

Hoisting is a JavaScript concept that allows variables and function declarations to move to the top of their scope before code execution. This means that if we do this:

console.log (greet); // undefinded
var greet = "say hello";

will be interpreted like this:

var greet; // undefined
console.log(greet);
greet = "say hello";

The problem with var

var values is being reassigned here. If you have used greet it in other parts of your code, you might be surprised at the output you might get. This will likely cause a lot of bugs in your code. This is why let and const are necessary.

var greet = "Hi";

if(true) {
greet = "There"
}

console.log(greet); // There

let

1. Scope of let

2. Redeclaration and reinitialization

3. Hoisting

scope of let

let has block and functional scope. Everything that has been mentioned within {} is considered a block.

let greet = "Hi";

function greeting() {
  let greet = "Hello";
  console.log(greet);
}

greeting();    // Hello
console.log(greet); // Hi

in the above code, the greet variable with "Hey" value has a global scope whereas the greet variable with "there" value has a blocked scope.

if(true) {
  let greet = "Hi";
}

console.log(greet) // ReferenceError: greet is not defined

let variables can be updated and not re-declared

We can update the value of let variable within the scope, but we can not re-declare the same variable again.

let greet = "Hi";
greet = "There"

console.log(greet); // There

let greet = "Hi";

if(true) {
 greet = "There"
}

console.log(greet); // There

let greet = "Hi";
let greet = "There"

console.log(greet); // Error: The symbol "greet" has already been declared

Hoisting of let

console.log (greet); // ReferenceError: Cannot access 'greeting'
                                      // before initialization
let greet = "say hello";

For the same code, if we try to access the greet variable with var, it will not throw an error and undefined will be returned. But not the same case for the let keyword. you can access the let value if it's not defined.

const

1. Scope of const

2. Redeclaration and reinitialization

3. Hoisting

scope of const

variables declared with the const maintain constant values. Therefore they are only accessible within the block scope in which they are defined.

if(true) {
  const greet = "Hi";
}

console.log(greet) // ReferenceError: greet is not definedkkb

const variables can not be updated and can not be re-declared

Once, you have given the value to const, that will be fixed, you can not change it.

const greet = "Hi";
greet = "There"

console.log(greet); // Error: Cannot assign to "greet" because it is a constant

This behaviour is somehow different when it comes to objects declared with const. While a const the object cannot be updated, the properties of these objects can be updated. Therefore, if we declare an const object as this:

const greet = {
message: "Hi there",
times: 5
}

greet = {
thought: "ok done",
times: 5
}     // TypeError: Assignment to constant variable.

// here, we can not change the object directly, but we can change the values of
// object properties.

const greet = {
message: "Hi there",
times: 5
}

greet.message = "Hi again";

console.log(greet); // { message: 'Hi again', times: 5 }

Hoisting of const

Same as let, we can not use not initialized const variables.

console.log(greet)

const greet = "HI" // ReferenceError: Cannot access 'greet' 
                       // before initialization