JavaScript Variables: Everything you need to know

If you use the same value more than once you should store it into a variable.
Variables are boxes that store values like numbers, words, arrays, objects, and more.
In Javascript, we can declare a variable using three keywords: var, let, and const. Each keyword gives the variable a different functionality.

var number;
let name;

These are called variable declarations. Two variables called number and name exist in our code but no value is assigned to them. Let’s change that.

number = 43;
name = "Kevin Doe";
const currentYear = "2020";

When you assign a value to a variable for the first time, it is called initialization.
The number variable stores the number 43. The name variable stores the string “Kevin Doe”. And we declare a new variable currentYear initialized with the value “2020”.

var VS let

As I said each of these three keywords can make a variable to work differently. Let’s first discuss the differences between var and let variables.

console.log(city); // undefined
var city = “Lisbon”;
console.log(city); // Lisbon
console.log(lastYear); // error 
let  lastYear = 2019;
console.log(lastYear); // 2019

This is the concept of hoisting. When JavaScript executes our code, it moves all variables to the top of the file. Var variables are initialized with undefined while let and const variables remain uninitialized.

The variable city is hoisted and initialized with undefined. And when we try to print its value for the first time we get undefined. As the code continues to execute to the bottom city is assigned with “Lisbon”. And when it is printed for the second time we get “Lisbon”.

The variable lastYear is hoisted but uninitialized because it is a let variable. So, when we try to print it we get an error because lastYear has no value. And the code stops to run because of it. But if that line of code was not there lastYear would be assigned to 2019 and printed.

The second major difference is scope. But let’s first invite const to the party too, just to be more clear.

var a = “a”;
let b = “b”;
const c = “c”;

function hey() {
  var a = 1;
  let b = 2;
  const c = 3;
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
}

hey();

console.log(a); // a
console.log(b); // b
console.log(c); // c

First, we declare and initialize three variables a, b, c in the global scope. Think of the global scope as the file where we are writing our code.

We create a function called hey and we declare three variables. The names are the same as the previous ones but with different values. When we run the function hey we print the variables a, b, and c. We get 1, 2, and 3.

But why we don’t get “a”, “b”, and “c”?

Because the variables declared in the function hey are completely different. Those variables in the hey function are declared in the function scope. Every function has its scope. The variables declared in a function are only available inside that same function.

When we try to print the variables a, b, and c after running the hey function, in the global scope we get “a”, “b” and “c”.

var a = “a”;
let b = “b”;
const c = “c”;

if(true) {
  var a = 1;
  let b = 2;
  const c = 3;

  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
}

console.log(a); // 1
console.log(b); // b
console.log(c); // c

We have three variables a, b, and c with values “a”, “b”, and “c” in the global scope. We run an if statement which condition is always true. There we declare variables with the same names a, b, and c with values of 1,2, and 3. And when we print them, we get 1, 2, and 3.

After that, we print them in the global scope. And we get 1, “b”, and “c”.

But why 1?

Because var variables have only function scope while let and const have block scope.
Everything that is enclosed between a pair of curly braces is a block scope. So, for var variables, everything is a global scope except functions.

const

We saw that const is block-scoped. But the thing why const is special is because its value can’t be reassigned. Also, we can not declare a const variable without initialization.

var  a = 2;
a = 4;

let x = 5;
x = 1;

const  z; // error

const y = 10;
y = 33; // error

What keyword should I use?

I always try to use const, and use let when I am sure that the value will need to be reassigned, like in loops for example. Const keeps my code secure and less prone to errors because values cannot be reassigned. I avoid using var because of its weird, error-prone scope.