var, let and const in javascript

var, let and const in javascript

Table of contents

var, let and const are the 3 ways to declare variables in javascript based on the requirement of the variable. There are many differences between these types, let us discuss characteristics of each of these types.

var

This was the only one type of declaration available before the introduction of ES6. var is the type which has global scope or function scope, i.e when the variable declared with var outside the function it can be accessed anywhere within window but when declared within the function it can be accessed only within the function. let's see with code

var variable1="hello"
function foo(){
    var variable2="javascript"
}

In the above code variable1 is global scoped and variable2 is function scoped

var variable1="hello"
function foo(){
    var variable2="javascript"
}
console.log(variable2) // variable2 is not defined

Above code shows error as variable2is not defined, because variable2 is function scoped.

Hoisting in var: For var hoisting happens before the execution of the code starts and assigns with special placeholder undefined, So even if we access that variable before initialization of value it does not show error instead shows placeholder/default value i.e undefined. Let's see with code,

var variable1
console.log(variable1) // undefined
variable1="hello"

let

let is one of the variable type introduced in ES6. As var is having global or functon scope let is having block scope, i.e if variable declared with let type then it can't be accessed outside of the block. Let us see in code how it is.

let variable1="hello"
{
   let variable2="javascript"
}
console.log(variable1) //hello
console.log(variable2) // variable2 is not defined

Other characteristics of this type of variable are

  1. variable value can be updated at any point of time if accessible.
  2. we can't redeclare let variable in same scope, but it can be declared with same name in other scope/block.
  3. let is also hoisted but not in the global space, It is allocated memory in some reserved local space and It can't be accessed until it is initialized with some value. So if we try to access that variable before initialization then throws Reference Error. Let's see code for hoisting
    console.log(variable1) // undefined
    console.log(variable2) // Reference Error
    var variable1="hello";
    let variable2="javascript"
    console.log(variable2) // javascript
    

    const

    const is also one of the variable type introduced in ES6. This one is also a block scoped variable type unlike var which is global/function scoped. Let us see the usage of const in code.
    const variable1="hello"
    {
     const variable2="javascript"
    }
    console.log(variable1) //hello
    console.log(variable2) // variable2 is not defined
    
    Other characteristics of this type of variables are
  4. In this variable value cannot be reassigned, But in terms of objects and arrays it can be modified. Let's see in code ``` const v1=10; v1=20; // Assignment to constant variable

const array1=[ 1, 2, 3, 4, 5 ]; array1[2]=6; // Works as we can modify const array console.log(array1) // [ 1, 2, 6, 4, 5 ]

const object1=[{name:"Deekshith", skill:"javascript"}]; object1[0].skill="react"; // Works as we can modify const object console.log(object1); // [{name:"Deekshith", skill:"react"]

2. we can't redeclare `const` variable in same scope, but it can be declared with same name in other scope/block.
3. `const` is also hoisted but not in the global space, It is allocated memory in some reserved local space and It can't be accessed until it is initialized with some value. So if we try to access that variable before initialization then  throws Reference Error. Let's see code for hoisting

console.log(variable1) // undefined console.log(variable2) // Reference Error var variable1="hello"; const variable2="javascript" console.log(variable2) // javascript ```

These are the different types of variable declarations available in javascript, and some special characteristics of those types.

Also there is one of the concept called Temporal Dead Zone comes into picture, You can look into Temporal Dead Zone blog for reading about that

Thank you