How to declare variables in JavaScript with var, let and const

Oftentimes we need to store a piece of data in JavaScript. Whether we need it to be stored in a database or we temporarily need it to do a calculation, it’s important to understand that variables play a huge role in programming.

In JavaScript there are three different options on how to declare a variable. Each of them have their “gotcha’s” and we will discuss all three in this blogpost. Coding along isn’t necessary, but feel free to try some examples yourself!

V is for var

The first and oldest example is var. This way of declaring a variable was shipped in the early days of JavaScript, back when I was still a little boy. Nowadays it’s used very little as it can have some side effects if implemented without caution. Let’s look at some examples on how weird behaviour can exist.

First we declare a variable

var myName = "Duncan";

After we’ve declared the variable we’re going to use, let’s do something with it.

function getName(name) {
  return name;
}

If we run this code, what would happen? If your answer was nothing, you were correct! We need to call the function to actually get a value back. Let’s do that. This is what the code looks like all together:

var myName = "Duncan";

function getName(name) {
  return name;
}

getName(myName);
// Returns: “Duncan”

Let’s look at another example, but this one might trick you.

var x = 1;

if (x === 1) {
  var x = 2;
  
  console.log(x);
  // Output: 2
}

console.log(x);
// Output: 2

Did you get what happened here? At first x is one so we enter the if statement, but then it gets redeclared. The x = 1 is overwritten and we can’t access it anymore since var is always “globally scoped”.

That’s all you need to know about var now, but we’ll get to it later why this is rarely used anymore. Trust me, it’s fun. But let’s learn about the other options first.

Let is for let me change it

Let is very similar to var in the way you declare your variables. Instead of the word var, you’d use let. Okay, so what’s the difference between var and let if they’re so similar? Glad you asked! The difference is the scope level. The what level? The scope level. Let me show you.

In JavaScript you have something called “scope”. When you start a new JavaScript file, you’re in the “global” scope. This is the part of the file where every variable or function can access one and another. If you declare a variable here, you can use it in any of the functions you defined.

Let’s revisit the last example from var, but change the var into let.

let x = 1;

if (x === 1) {
  let x = 2;
  
  console.log(x);
  // Output: 2
}

console.log(x);
// Output: 1

Do you see what changed? We have two variables, with the same name… but they don’t get overwritten? Correct! The answer for this lies in the “scope”. Since we defined the first X variable in the global scope and the second X variable in the “if statement” scope, the two don’t know of each others existence! This is a big difference compared to var. This solves a lot of weird bugs that might happen.

Another thing to note is that let, just like var, still allows you to change the type of primitive you assigned to it. Let’s get the same example again, but we do some reassignments.

let x = 1;
x = "this is now a string";

if (x === 1) {
  let x = 2;
  
  console.log(x);
  // Output: 2
}

console.log(x);
// Output: “this is now a string”

We never get to the if statement because we changed the type and content of the variable! But… what if we’re certain we never want to change it?

Const is for staying constant

Last but definitely not least const. This keyword is used for, you guessed it, variables that stay constant! The variables that will not change. What would such a variable look like? Well, what if we’re creating a favourite movie variable and we’re never, ever going to change our opinion? That would result in saying:

const myFavouriteMovie = "Interstellar";

If we try and overwrite this variable, we’d get an error saying we cannot reassign the variable.

Just like let, const is also block scoped.

Let's talk more about scope

The scope in JavaScript is a very interesting subject. There are many caveats that can be discussed, but let's stick to variables for now. Important to know is that variables always have the ability to be used in the level(s) deeper. Let's say I create a variable in the global scope using let

let myCar = "Ford Mustang";

But then we decide to use this variable, which is defined in the global scope, inside the scope of a function.

let myDreamCar = "Ford Mustang";
let money = 5000;

function getMyDreamCar(car) {
  return car;
}

console.log(getMyCar(myDreamCar));
// Output: Ford Mustang

Okay, we've seen this example already in the explanation of var but what else could we do? How about we add another variable to see if we can afford the car, but use this variable to determine if we can get the Mustang or we have to work a little harder.

let myDreamCar = "Ford Mustang";
let money = 5000;

function getMyDreamCar(car) {
  if (money > 150000) {
    return car;
  }
  return "Sorry, you have to work a bit harder.";
}

console.log(getMyCar(myCar));
// Output: Sorry, you have to work a bit harder

Unfortunately I have to work a little harder still! But that's totally okay. We've made some good progress with understanding the main differences between var, let and const. There's another thing to discuss which is hoisting, but I will write a separate blog post for that!