Let, Const & Var

When declaring a variable in Javascript, you have three options: let, var, const. Here we’ll talk about all three ways and how they handle in certain scenarios.

Scope

Previous to ES2015, Javascript only had two scopes; global and function. With ES2015 and its introduction of two new keywords, let and const, a new scope was introduced; the block scope.

Global Scope: any variables declared outside of functions are accessible from anywhere in the program.

Function Scope: variables declared within a function are only accessible with that function. If they are declared using var, they will be available anywhere within the function, even if declared within inner blocks.

Block Scope: let and const have block scope. var does not.

//using var
function findScope() {
 var willWork;
  if (true) {
   console.log(willWork);
   var willAlsoWork;           //This var is accessible outside 
  }                            //           of the block it was
 console.log(willAlsoWork);    // <---------------- declared in
}

However, if we use let or const, any declared variables are limited to the blocks that they were declared in:

//using const or let
function findScope() {
 let stillWorks;
   if (true) {
   console.log(stillWorks);
   let willNotWork;           //This var is NOT accessible outside 
  }                           //               of the block it was
 console.log(willNotWork);    // <-------------------- declared in
}

Declaration

When we declare a variable using var, it is figuratively hoisted to the top of the code before execution. This allows you to use it before it’s declared, though it’ll be initialized with a value of undefined until it gets to the line where it’s assigned a different value¹:

//prints out 'undefined'
console.log(animal);
var animal = 'possum';

let and const are also hoisted but are not initialized with a value until the compiler reaches the declaration:

//this will result in a Reference Error
console.log(animal);
let animal = 'possum';

if let is declared but not assigned a value or is used before being assigned a value, it’s value will be undefined. This is known as a Temporal Dead Zone — the time between initialization and assignment when using let.

const must be assigned a value when declaring it.

// trying to access the animal variable here
                        // would result in an ReferenceError.
let animal;             // animal = 'undefined'
                        // animal = 'undefined'
console.log(animal);    // animal = 'undefined'
                        // animal = 'undefined'
animal = 'possum';      // animal = 'possum'

const must be assigned a value at declaration.

Putting it all together:

                       //animal = undefined, insect = ReferenceError
                       //animal = undefined, insect = ReferenceError
var animal;            //animal = undefined, insect = ReferenceError
let insect;            //animal = undefined, insect = undefined
                       //animal = undefined, insect = undefined
animal = 'possum'      //animal = 'possum',  insect = undefined
insect = 'spider'      //animal = 'possum',  insect = 'spider'

Mutability

All three of these options are mutable. With var and let, this is well-known and expected. But const? Behold:

//works as expected:
const dog = 'Clifford'
dog = 'Wishbone'   //this will lead to a TypeError
//but this WILL work:
const dog = {name: 'Clifford', color: 'red'}
dog.name = 'Wishbone'
console.log(dog)

//  output: {name: 'Wishbone', color: 'red'}

const only prevents reassignment or redeclaration, it doesn’t grant immutability. Remember this when declaring objects and arrays using it.

Conclusion

These are the main differences between var, const, and let. It is generally best to use const when you do not plan on reassigning a variable, and let when you are. var still has its uses, but I won’t go over them here. Most headaches can be avoided if you just remember to declare your variables at the top of any function or block in which you plan to use them. Good luck!

¹all three will be assigned a value of undefined during the initialization phase. However, when using var, declaration and initialization are coupled and therefore its time in this state is more prominent.