Difference between let and var in JavaScript

Difference between let and var in JavaScript

Using the var keyword was the only method of declaring variables in the early days of JavaScript. The program defines a variable that was declared with the var statement. Redeclaring a variable inside a block will also declare the variable outside the block, which was one problem with using the var keyword.

Let and const, two additional keywords, were added with the release of ES6 in 2015. In javascript, the terms var and let are both used to declare variables, but var is function scoped whereas let is block scoped. Unlike variables defined with the var keyword, which are hoisted, variables declared with the let keyword cannot be redeclared and must be declared before use.

Think about how these two JavaScript functions differ from one another:


function varFunction() {

  var example = 10;
  if (true) {
  
    var example = 20;

    console.log(example); 

// result will show 20

  }
  // outside condition
  console.log(example); 
  // result will show 20
  
}

Even if an x variable is declared twice with two different values in varFunction(), only one x variable is used throughout the function.


function letFunction() {

  let example = 10;
  if (true) {
  
    let example = 20;

    console.log(example); // result will show 20
  }
  // outside condition
  
  console.log(example); 
  
  // result will show 10
  
}

Two different x variables are utilized in letScoping(), one in the body of the function and the other in the if block. If we substitute the first let keyword with a var keyword, the behavior is unchanged:

Lets checkout var and let both in same function:

function bothLetAndVarFuntion() {

  var example = 10;
  if (true) {
  
    let example = 2;

    console.log(example); // result will show 20

  }
  console.log(example); // result will show 10
  
}


Var's behavior differs significantly from other programming languages and can result in issues that are challenging to fix, but it can also be advantageous in some situations. Programmers can now reuse names for temporary variables within the same function thanks to the more recent introduction of the let keyword, which enables more accurate and predictable variable scoping.

Lets checkout another example:

console.log(example);

var example = 100;
console.log(example);
//result will show 
undefined
100 


console.log(example);

let  example = 100;
console.log(example);
//result will show 
ReferenceError: Cannot access 'example' before initialization


Overall Difference between let and  var are : 

1.  let and var both used to declare a variable but using syntax are different.  Let variable define as let and var variable declare as a var keyword.

2.  Let variable defined statement as block scope and var variable defined have functional scope

3.  Let is feature of ES6 and var is an ECMAScript 1 feature.

4.  let supported latest version of browser where var variable support both old and latest browser

5. Example : let example = "100";  var  example = 100

Hope this article will help you to know about difference between let and var in JavaScript