Javascript variables; should you use let, var or const?

Ever wondered when to use either of the three? Why were the other two introduced into javascript? Lets try get some answers

1. var keyword

for(var i = 0; i<10; i++) {
  console.log(i)
}
console.log(i)

I am making an assumption you know how for loop works. Make a guess, what will be the value printed by the first console log, what about the second one?
The first one will print out values 0 to 9 then the last console log will print the value 10. This is because i is still valid outside the for loop — the scope of i is not bounded by the curly braces {} . Now what about this:

function(){
  for(var i = 0; i<10; i++) {
    console.log(i)
  }
  console.log(i)
}

What will be printed this time round?

var and variables in es5 has scopes in functions meaning the variables are valid within the function and not outside the function itself. The code above hence outputs same results as the previous one. With this information what is the output of the next code?:

function printing(){
  for(var i = 0; i<10; i++) {
    console.log(i)
  }
}
printing()
console.log(i)

Right the last console.log has an error stating that i is undefined since the scope of iin the above function is restricted within the function itself so i is only available inside printing

There is also the concept of variable hoisting which might make this blog longer so lets do it in a separate article

One last thing, have you ever seen JavaScript code that looks like this:

(function (){
  for(var i = 0; i<10; i++) {
    console.log(i)
  }
})()

This is an attempt to keep variables in scope to the functions, this is usually called immediately invoked function expression.

Too much madness up to this moment, so much so that es6 comes with a way to deal with this variable scope drama.

2. the let Keyword

Its the solution to the madness in the var variables. These variables are scoped in the braces {} so in this case you can guess what happens

for(let i = 0; i<10; i++) {
  console.log(i)
}
console.log(i)

It will print 0–9 then throw a reference error as i is not in scope outside the braces

3. The const

Do you have values that you dont want changed or that will never change? Like the value of mathematical pi, they can be assigned to const in javascript. Const actually means that once the variable is assigned it cannot be assigned again and an attempt to do so will throw an error

Lets think of a situation where we can use a const, like say we want to apply discount to an array of numbers and we do not want this discount to be changed at any other point

const multiplier = 3.4
discount = 5.6 // this will throw an error
[23, 56, 67].map((num)=> num * discount)

The nice looking arrow => inside the map function is called arrow function which I have written something about here

What might happen in this case

const dog={
  age: 3
}
dog.age = 5
dog = { name: 'biko'}

The const does not make the variable immutable hence the dog.age will change the age property of the dog object. The last statement will throw an error as the dog cannot be assigned to another variable. Pretty confusing, huh!

Guess what happens here then

var i
i = 34
for(let i =0; i<4; i++){
 console.log(i)
}
console.log(i)

Conclusion

Always use let as much as possible to avoid the scope monster

References for further reading

1. This guy Mattias Petter Johansson has a nice video about it on youtube (https://www.youtube.com/watch?v=sjyJBL5fkp8)
2. Erick Elliot has something to say too (https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75)
3. Of course the MDN has a tone of info — if you follow the link, go to the declarations subsection