Deep Tech Point - learn tech easy way

In Javascript both var and let are used to declare a variable. However, there are a few differences between javascript var vs let, so let’s take a look at them.

1. Scoping rules

The main difference between var vs let lays in scoping:

Variables that are declared with a var keyword are scoped to the immediate function body. For this reason, var has function scope. We could also say that if we declare a variable with var, we define it throughout the program as compared to let.
Variables that are defined with var belong to the global scope if they are declared outside a function – they become a global variable and are accessible by any function.
Variables that are defined with var belong to the local scope if they are declared inside a function, which means that you can not access that specific variable outside of the function.

Variable that is declared with a let keyword is scoped to the immediate enclosing block denoted by { } (in Javascript, a block is delimited by a pair of curly braces). For this reason, let has block scope. And this is the main reason why the let keyword was introduced – scooping to the immediate function body was confusing and was one of the main sources of bugs in JavaScript.

Maybe an example will serve the purpose to explain the difference between javascript var vs let in scoping even better:

(function () {
  var blockVar = "Block var";
  let blocklLet = "Block let";

  console.log(blockVar, blocket);
  
  {
    // inner block scope
    var innerBlockVar = "Inner block var";
    let innerBlockLet = "Inner block let";
    console.log(innerBlockVar, innerBlockLet);
  }

  console.log(innerBlockVar);
  // error: innerBlockLet is not defined
  console.log(innerBlockLet);
}) ();

2. The temporal dead zone
The difference between var and let is that the let variables have temporal dead zones while the var variables don’t. You need to understand a life span of both var and let variable if you want to understand the temporal dead zone.
Both var and let variables have two steps: creation and execution.

In the creation phase variables declared with var are assigned storage spaces and immediately initialized to undefined. Then, in the execution phase, javascript assigns these variables the values specified by the assignments, of course, if there are ones. If there aren’t any values, the values of the var variables remain undefined.
The difference with variables declared with the let keyword is that in the creation phase, javascript will assign storage spaces, but will not initialize them. So, when Javascript starts referencing uninitialized variables, it will throw a ReferenceError. In the execution phase, both let and var variables have the same behavior.

So, what’s the deal with the temporal dead zone? Variable is said to be in “temporal dead zone” from the start of the block until the let variable declaration is processed. In other words, the let variable is where you cannot access it before the variable is defined.

Let’s take a look at an example:

(function () {
  // error: cannot access before initialization
  console.log(testLetHoisting);
  let testLetHoisting = "Let defined variables hoisted but you can't access it before initialization.";
  console.log(testLetHoisting);
}) ();

3. Redeclaring var and let variables

You can redeclare a var variable without any issue. But, if you decide to redeclare a variable with the let keyword, you will get a SyntaxError.

'use strict';
(function () {
   var testVar = "Can we redeclare with var?";
   var testVar = "Yes we can!"; 

   let testLet = "Can we redeclare with let?";
   let testLet = "No, we get error!";
}) ();

4. Creating global object property

The global var variables are added to the global object as properties. The global object is a window on the web browser and global on Node.js:

var globalVar = true;
// globalVar exists
console.log(window.globalVar); // true

However, at the top level, let, unlike var, does not create a property on the global object:

let globalLet = true;
console.log(window.globalLet); // undefined

Javascript var vs let