Variables: let, const, and the Death of var

Alright, let’s start simple. Variables are how we store stuff in code. You’ve got a value — maybe a name, a score, a list of things — and you want to save it for later. That’s it. You give it a name, and boom, you can use it anywhere.

But here’s the thing: not all variables are created equal. Especially in JavaScript.
If you don’t understand how they work, they can make your code confusing, buggy, and honestly, kinda painful to work with.

Let’s break it down.

1. A Quick Look Back at var

Way back in the early days of JavaScript, var was the only way to declare variables. It got the job done, but it also came with some… quirks.

The Scope Issue

var doesn’t care about curly braces like if or for. It only cares about functions when it comes to scope.

if (true) {
  var mood = "happy";
}
console.log(mood); // yep, still prints "happy"

Wait what? Yeah — it leaks outside the block. That’s a recipe for bugs.

Hoisting: The Sneaky Behavior

var also gets “hoisted” to the top of its scope, but only the declaration, not the value.

console.log(thing); // undefined, not an error
var thing = "surprise!";

This messes with your brain if you’re not expecting it. Trust me, everyone hits this at some point.

Loops and the Classic var Trap

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Prints: 3, 3, 3

You thought you’d get 0, 1, 2, right? Nope. That’s var being weird again.

2. ES6 Shows Up with let and const

In 2015, JavaScript got a much-needed upgrade with ES6. It introduced let and const, and they fixed a lot of the headaches caused by var.

Block Scope for the Win

Unlike var, both let and const actually respect block-level scope.

if (true) {
  let vibe = "chill";
}
console.log(vibe); // ReferenceError, as expected

This makes your code more predictable and way easier to debug.

What’s the Deal with const?

const sounds like it means “can’t change”, but that’s only partly true.

const user = { name: "Sam" };
user.name = "Jordan"; // totally allowed

user = { name: "Alex" }; // nope, error

With const, you can’t reassign the variable, but you can still change the contents if it’s an object or array.

3. So When Do You Use let or const?

Here’s a solid rule to follow:

Use const unless you know you’ll need to reassign the value.
If it’s going to change, use let.

Some Real-Life Examples

// use const when the value won’t change
const MAX_RETRIES = 5;

// use let when you’re updating it
let score = 0;
score += 10;

Sticking to this rule keeps your code cleaner and less error-prone. It’s basically like leaving sticky notes for your future self: “Hey, this value isn’t supposed to change.”

4. Common Mistakes to Watch Out For

Here are a few traps that even experienced devs fall into:

1. Thinking const Means “Frozen”

Nope. It just means you can’t reassign the variable. You can still change arrays and objects.

const colors = ["red", "green"];
colors.push("blue"); // totally fine

2. Re-declaring let or const

let name = "Alex";
let name = "Taylor"; // error — can't re-declare in the same scope

Unlike var, you can’t just keep declaring the same variable over and over.

3. Still Using var by Habit

This one’s sneaky. Old habits, tutorials, and some outdated blog posts might still use var, but there’s really no reason to use it today.

5. Why var Is Basically Dead

Modern JavaScript doesn’t need var anymore. Tools like ESLint will even warn you if you try to use it.

// Example ESLint rule
{
  "rules": {
    "no-var": "error"
  }
}

You’ll see this in most modern projects — especially if you’re working with React, Vue, or Node. Just stick with let and const, and life will be better.

6. Try It Yourself: Practice Time

Here are a few mini-exercises to help make it stick.

1. Convert This to let and const

var username = "Taylor";
var age = 25;
age = 26;

Refactor: Use const where the value won’t change.

2. Fix the Hoisting Problem

console.log(message);
var message = "Hello!";

Fix it: Replace var and reorder things so it’s clear and clean.

3. Avoid Unnecessary Reassignment

let total = 100 * 2;
total = 200;

Does this need to be a let? Probably not.

Final Thoughts: Small Choice, Big Difference

This might seem like a tiny part of JavaScript, but it makes a huge impact.
Getting in the habit of using const by default and only reaching for let when you need to is one of those small things that separates clean code from messy code.

It’s not just about avoiding bugs. It’s about writing code that makes sense at a glance — for you and anyone else who touches it later.

Your Turn 👇

Try the exercises above, or open up your editor and refactor some old code you’ve written. If this helped clear things up, feel free to share it with a fellow dev.

And hey — if you’re still using var, no shame. Just… maybe don’t anymore?