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? Let's try to get some answers

1. var keyword

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

This will print values 0 to 9 and the last console log will print 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)
}

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 the same results as the previous one.

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 the printing function.

There is also the concept of variable hoisting, you can check it here.

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 confusion which is pretty much solved by ES6.

2. 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. const keyword

Do you have values that you don't want to be 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 any attempt to do so will throw an error

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

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

The nice-looking arrow => inside the map, the 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

const is a signal that the identifier won’t be reassigned.

let is a signal that the variable may be reassigned, such as a counter in a loop, or a value swap in an algorithm. It also signals that the variable will be used only in the block it’s defined in, which is not always the entire containing function.

var is now the weakest signal available when you define a variable in JavaScript. The variable may or may not be reassigned, and the variable may or may not be used for an entire function, or just for the purpose of a block or loop.

Thanks a lot for reading this article. Make sure you give this post claps if you enjoyed this post. 👏👏👏👏