LET vs VAR in JavaScript Variable Declarations

Still not sure about the difference between var and let in JavaScript? Let me explain!

What's the difference between let and var when declaring variables in JavaScript?

Both var and let are used to declare variables, but they have some important differences, especially when it comes to their scope.

• var has a function scope, meaning it is accessible throughout the entire function where it is declared, even inside blocks like loops or conditionals.
• let has a block scope, meaning it only exists within the block (such as loops or if statements) where it’s declared.

So what does that actually mean? Let’s break it down with an example.

Using var

Let’s say you have 10 buttons, each with a unique ID like btn1, btn2, and so on:

// Using var
for(var i = 1; i < 10; i++) {
    $("#btn" + i).click(function () { 
        alert(i); 
    });
}

Here, i is declared with var, so it gets hoisted to the function scope. This means the click function refers to the same i across all iterations. So, when you click any of the buttons, the value of i will always be 10, because the loop finishes and i ends up being 10 after the loop ends.

Using let

Now, let’s switch to let:

// Using let
for(let i = 1; i < 10; i++) {
    $("#btn" + i).click(function () { 
        alert(i); 
    });
}

Here, i is scoped to the block inside the loop. Each iteration of the loop gets its own i, so when you click on a button, it will alert the correct value of i for that button (1, 2, 3, etc.).

Why is this important?

With let, the variable i is block-scoped to each iteration of the loop. This prevents the value from being shared across all clicks, which is why the correct value is shown when clicking each button.

Global vs. Block Scope

Let’s take a look at how let and var behave inside conditionals:

'use strict';

var country = "Russia";
var a = 5;
var b = 10;

if (country === "Russia") {
  let a = 50; // This 'a' is scoped only to this block
  var b = 1;  // This 'b' is global, changes everywhere

  console.log(a); // 50
  console.log(b); // 1
}

// Outside the if block
console.log(a); // 5 (the global 'a' remains unchanged)
console.log(b); // 1 (global 'b' is updated)

In this example:

• let a = 50 is scoped only inside the if block, so the value of a outside the block remains 5.
• var b = 1 is hoisted to the global scope, so b is updated globally, even though it was inside the if block.

Conclusion

• Use let whenever you need block-scoping (e.g., in loops or conditionals), and when you want to avoid accidental redeclarations and global object pollution.
• Use var primarily for legacy code or situations where function scoping is required, but be aware of its quirks with hoisting and redeclaration.

Overall, let is recommended for modern JavaScript development due to its predictable behavior and block-scoping capabilities.