The difference between let, var, and const for defining JavaScript variables (and why you should probably just use let)

A few years ago, I very passionately only used var to define variables. A little over a year ago, I softened, suggesting that let isn’t a bad thing depending on your browser support needs.

It’s taken me far too long, but I’ve finally come around, and I’m all-in on let.

Over the next few days, we’re going back-to-basics, looking at how to define variables, scope in JavaScript, and how var, let, and const fit in. I’m also going to suggest that for most people, most of the time, you should just use let.

Let’s dig in.

What’s a variable?

(Feel free to skip this section if you already know it.)

A variable is a keyword you can use as a reference for some other piece of data.

You create a variable using a variable declaration. Historically, you created a new variable using the var keyword. Modern JS includes two new ways to define variables: let and const (we’ll talk about the difference between them shortly).

let name = 'Chris';

// logs "Chris"
console.log(name);

Updating variables

Prefixing a variable with a variable declaration (var, let, or const) defines a new variable. Omitting a variable declaration updates an existing variable.

There’s a caveat to this: if a variable isn’t currently defined, omitting a variable declaration creates a new variable (you should always use a declaration to define a new variable, though).

// Create a new variable
let wizard = 'Gandalf';

// Update the wizard variable
wizard = 'Radagast';

let

let does the almost the same exact thing as var.

The big difference between let and var is that you can’t redeclare a variable set with let in the same scope.

// The value of `sandwich` is "tuna"
var sandwich = 'tuna';

// The value of `sandwich` is now "chicken"
var sandwich = 'chicken';

// The value of `chips` is "Cape Cod"
let chips = 'Cape Cod';

// Throws an error: "Uncaught SyntaxError: Identifier 'chips' has already been declared"
let chips = 'Lays';

You can still change the value of chips. You just can’t declare it as a new variable once it’s already been defined within the current scope (more on scope in a few chapters).

// The value of `chips` is "Cape Cod"
let chips = 'Cape Cod';

// The value of `chips` is now "Lays"
chips = 'Lays';

// logs "Lays"
console.log(chips);

const

Unlike var and let, if you define a variable with const, it cannot be given a new value. It is, as the term implies, constant.

// The value of sandwich is "tuna"
const sandwich = 'tuna';

// Throws an error: "Uncaught TypeError: Assignment to constant variable."
sandwich = 'chicken';

It’s a bit misleading, though, because if you have an object or array defined with const, you can’t redefine it, but you can add and remove items from the object or array.

const sandwiches = ['tuna', 'chicken'];

// Strangely, this is allowed
sandwiches.push('pb&j');

Which variable declaration should you use?

Generally speaking, use let for values that will change and const for ones that won’t or shouldn’t. Avoid var, since let does the same thing but a little bit better.

I personally hate thinking about whether to use let or const, and have a tendency to just use let for everything. To me, the minor benefits of const aren’t worth the mental overhead of having to think about it every time I declare a variable.

Tomorrow, we’ll be looking at scope. On Wednesday, we’ll explore a scoping benefit let and const provide over var.