What is the difference between var, let and const with Example (Javascript)

What are variables?

Variables are named values and can store any type of value.

Here is how you can declare a variable in javascript.

var x = 100;

How to declare variables in javascript?

In javascript declare variables with var, let, and const.

//without keyword works as var
name = "Yash";

var compony = "Google";

let counter = 1;

const VERSION = 1.0;

Best way to understand var let const you need to understand

• Scope
• Hoisting
• Redeclaration of the variable
• Reassign the value

Scope

Var

Variable declared with var is functional scope.

Example.

// global scope
var a = 0;

function test(){
// functional scope
    var b = 1;
    if(true){
    // block scope
    console.log(b); // 1
    }
    console.log(a); // 0 
    console.log(b); // 1
}
test(); // 1 0 1
console.log(a); //  0
console.log(b); //  ReferenceError: b is not defined.

• In the above example "a" is declared in a global scope variable so can access anywhere.
• b is declared inside the "test" function so b is not accessible outside the function scope.

Let

Variable declared as Let is block scoped. outside block scope can't be accessible.

Example.

//global scope
let a = 0;

function test(){
// functional scope
   let b = 1;
    if(true) {
       let c = 2;
      // block scope
      console.log(a);// 0
      console.log(b); // 1
      console.log(c); // 2
    }
    console.log(a); // 0 
    console.log(c); // c is not defined.
}
test(); 
console.log(a); //  0

• In the above example a is in the global scope so we can access it anywhere.
• but c is declared in if block so we can not use it outside of if block.

Const

Variable declared as Const is block scoped. outside block scope can't be accessible.

Example.

//global scope
const a = 0;

function test(){
// functional scope
   const b = 1;
    if(true) {
       const c = 2;
      // block scope
      console.log(a);// 0
      console.log(b); // 1
      console.log(c); // 2
    }
    console.log(a); // 0 
    console.log(c); // c is not defined.
}
test(); 
console.log(a); //  0

• In the above example a is in the global scope so we can access it anywhere.
• but c is declared in if block so we can not use it outside of if block.
• Let and const scope is the same so we can not use the "c" variable outside of block-scoped.

Hoisting

JavaScript has a feature that allows functions and variables to be hoisted this is useful for many developers. Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

Hoisting means that you can define a variable before its declaration.

Var hoisting

console.log(num); // Returns 'undefined' from hoisted var declaration (not 6)
var num; // Declaration
num = 6; // Initialization
console.log(num); // Returns 6 after the line with initialization is executed.

• var default value without initialization is undefined.
• Here we declare num and after initialization of num to 6. the default initialization of num is undefined so num is printed as undefined.
• If you try to access it num without declaration gives you an error num is not defined

console.log(num); // Returns 'undefined' from hoisted var declaration (not 6)
var num = 6; // Initialization and declaration.
console.log(num); // Returns 6 after the line with initialization is executed.

• same happens if we declare and initialization in one line

console.log(num); // Throws ReferenceError exception - the interpreter doesn't know about `num`.
num = 6; // Initialization

if we cant declare a variable with the var keyword can't be hosted in javascript. variable can't be accessed before initialization to value.

Let and const hoisting

Let and const also hoisted but not like var. declared with var have default value undefined but for let and const give you ReferenceError exception if you used variable before initialization.

console.log(num); // Throws ReferenceError exception as the variable value is uninitialized
let num = 6; // Initialization

Reassign the value

To reassign a value is to reassign the value of a variable.

var  name = "yash";
let  company = "Google";
const age = 23;


name = "Yash Prajapati" // the name value is now "Yash Prajapati"
company = "Microsoft" // the company value is not "Microsoft"
age = 18; // Uncaught TypeError: Assignment to constant variable

• variable declared with var and let can be reassigned value to a variable
• variable declared with const can't be reassigned value to a variable.

Redeclaration of the variable

The redeclaration of a variable means that you can declare the variable again.

var a = 1; // 1
var a = 2; // 2

let b = 2;  // 2 
let b = 5;  // Uncaught SyntaxError: Identifier 'b' has already been declared


const  c = 5; // 5
const  c = 6; // Uncaught SyntaxError: Identifier 'c' has already been declared

conclusion

• always declare a variable with var or const.
• don't use var anymore
• don't try to access variables without declaring them.

Questions for the day

function sayHi() {
  console.log(name);
  console.log(age);
  var name = 'Lydia';
  let age = 21;
}

sayHi();

1. Lydia and undefined
2. Lydia and ReferenceError
3. ReferenceError and 21
4. undefined and ReferenceError

Write the answer in the comment.

If you like then buy me the first coffee ever thanks in advance

if you found this helpful give me a like and comment. If you have any questions ping me on yashypsoft

Keep Learning :) Happy coding :)