Javascript Let Vs Var — Guide with Examples


// What's the difference between let and var?
var x = 10;
let y = 10;

if (x === 10) {
  var x = 20; // this will overwrite the outer x
  let y = 20; // this won't affect the outer y
}

console.log(x); // outputs 20
console.log(y); // outputs 10

20
10

If you've ever found yourself debugging JavaScript at 2am, wondering why your variable is being overwritten — I feel you. It's times like these that make us question our life choices. But it's also a great opportunity to learn about one of the most fundamental concepts in JavaScript: scope. And that's where the age-old debate comes in: javascript let vs var. Which one should you use? And why does it matter?

Var - The Old Guard

Call me old-fashioned, but I still see a lot of developers using `var` for variable declarations. And honestly, it's not that bad... until it is. The main issue with `var` is that it has function scope, not block scope. What does that mean? Well, let's look at an example:


function doSomething() {
  var x = 10;
  
  if (x === 10) {
    var x = 20;
    console.log('Inner x:', x);
  }
  
  console.log('Outer x:', x);
}
doSomething();

Inner x: 20
Outer x: 20

As you can see, the inner `x` overwrites the outer `x`. This can lead to some pretty unexpected behavior, especially in larger codebases.

Let - The New Kid on the Block

Enter `let`, the new kid on the block. Introduced in ECMAScript 2015 (ES6), `let` has block scope, which means it only affects the current block of code (i.e., between `{}` brackets). Let's try our previous example again:


function doSomething() {
  let x = 10;
  
  if (x === 10) {
    let x = 20;
    console.log('Inner x:', x);
  }
  
  console.log('Outer x:', x);
}
doSomething();

Inner x: 20
Outer x: 10

Much better! Now our outer `x` remains untouched.

And then there's `const`, which is similar to `let`, but with one key difference: you can't reassign its value. This is useful when you want to ensure a variable doesn't change:


const PI = Math.PI;
try {
 PI = 'foo';
} catch (e) {
 console.error(e);
}
console.log(PI); // still outputs Math.PI

TypeError: Assignment to constant variable.
3.141592653589793

Javascript Let vs Var - Which One Should You Use?

So, which one should you use? Honestly, I'd say stick with `let` and `const`. They're safer and more predictable than `var`. But if you're working with older codebases or need to support older browsers, you might need to use `var`.

Here are some general guidelines:

Use `let` for variables that might change.
Use `const` for constants or values that shouldn't change.
Avoid using `var` unless absolutely necessary.

In Conclusion...

Javascript let vs var might seem like a trivial debate, but it has significant implications for your code's maintainability and predictability. By choosing the right declaration method, you can avoid hours of debugging headaches down the line.

Convert Your Code Today!»