What is the difference between const, let and var

Published at:

Category:programming

var

- It can be updated and re-declared into the scope


    var myVar = "Hello"
    var myVar = "Hello again" //won't throw an error

- The scope of a var variable is functional scope.

Scope determines the accessibility (visibility) of variables. JavaScript has 3 types of scope: Block scope, Function scope, Global scope

- It can be declared without initialization.

- It can be accessed without initialization as its default value is “undefined”.


    var myVar;
    console.log(myVar); //undefined
    myVar = "Hello there!";
    console.log(myVar) // Hello there!

- Hoisting

Hoisting is a JavaScript mechanism where variables and functions declarations are moved to the top of their scope before code execution.

If we do this:


console.log(myVar);
var myVar = "Hello";

It will be interpreted like this:


    var myVar;
    console.log(myVar); //myVar is undefined
    myVar = "Hello";

The problem with var is that when you declare a variable globally and then you re-declare it again in order parts in your code, it will change its value and this may cause bug in your code.

Take a look at this example:


    var myVar = 1;
    var count = 2;
    
    if(count > 1){
       var myVar = "Hello";
    }
    
    var result = myVar + 10;
    
    console.log(result); // Hello10

Since count > 1 returns true, myVar is redefined to "Hello" and this changed its value from number to string while you expect that var result will be a number (11). This will become a problem when you do not realize that this variable myVar has already been defined before.

Now here it comes the benefit of using let and const

let

- The scope of a let variable is block scope.

Variable declared inside a {} block, can't be access outside it.


    {
    	let myVar = 2;
    }
	console.log(myVar);
	// ReferenceError: myVar is not defined

- It can be updated but it can not be re-declared into the scope.


let myVar = 2;
myVar = 10; // can be updated into the scope

let myVar = 1; 
//SyntaxError: Identifier 'myVar' has already been declared

- It can be declared without initializing it.


 let myVar;

- Hoisting, like var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized.

This will cause an error


      console.log(myVar);
      let myVar;
      //ReferenceError: Cannot access 'myVar' before initialization

const

- The scope of a const variable is block scope.


{
   const myVar = 10; 
}
console.log(myVar)

//ReferenceError: myVar is not defined

- It cannot be updated or re-declared into the scope.


    const myVar = 1;
    
    myVar = 10;
    
    // TypeError: Assignment to constant variable.

- It cannot be declared without initialization.


   const myVar; 
   
   console.log(myVar)

   //SyntaxError: Missing initializer in const declaration

- Hoistring, const declarations are hoisted to the top but are not initialized. so if you try to access a variable declared with const, then it will throw an error as it is not initialized.


    console.log(myVar)

const myVar; 

//SyntaxError: Missing initializer in const declaration

When it comes to objects, it's a little bit different.

An object declared with const can not be updated, but... its properties can be updated.

If we declare an object with const and then try to update it like this:


    const myObject = {
    	id: 1,
    	text: "This is text",
    };
    myObject = {
    	id:2,
    	text: "Updated text",
    };
    //TypeError: Assignment to constant variable.

But we can update its properties like this:


    const myObject = {
    	id: 1,
    	text: "I love coding",
    };
    myObject.id = 2;
    myObject['text'] = "I love JavaScript";
    
    console.log(myObject.id) //2
    console.log(myObject.text) // I love JavaScript

Summary

- var declarations are globally scoped or function scoped while let and const are block scoped.

- var variables can be updated and re-declared within its scope, let variables can be updated but not re-declared, const variables can neither be updated nor re-declared.

They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.

- While var and let can be declared without being initialized, const must be initialized during declaration.

- Always use const when you know that the variable value should not be changed

- Use let when you want the variable value to be changed during the code

- Avoid using var unless you know what you are doing.

programming

javascript

const

let

var

MohammedHammood

Full-stack developer, interested in web development and using technologies: Python, Django, Django Rest Framework, Javascript, Typescript, Reactjs, Redux, Sass, Styled-components, C++, Node.js, Express.js, Next.js, HTML, CSS/CSS3