JavaScript var, let and const

Disclaimer: the target of this article is to help javascript newbies to understand the very basic differences without going any deep

now let`s start 💪

Introduction 🥱

Before 2015 javascript developers used to use var as the keyword to declare variables, and life was easy, but not calm 😅

With using var to declare variables developers had to fight in many fields…

Redeclaration 🤦‍♀️
Believe it or not, with var you can use the same variable name as many times as you can without facing any errors, but you have to be ready for the unexpected results😬.

imagine the following:

function sayHi() {
 var name = “Our New User”
 var isLoggedIn = true
 if (isLoggedIn) {
    var name = “Sarah”
 }
 console.log(“Hi” + name) // Hi Sarah
}

The first thing that comes to your mind now is, so what?!, I redefine the variable, what the problem with that?!🤨

It is not a problem at all, as long as you know that is exactly what you want to do, not just that you forget that this variable has already declared before🧐.

The real problem with redeclaration comes with large apps, and once you forget that you have used the same variable name before.

DISCLAIMER✋: this won`t be a problem in case you have solid memory that helps you remember all the variables you have declared within a specific scope.

Scope 😵
The line above ends with the word SCOPE, before digging deeper, let`s first understand what scope is, think of scop as a box within which some functions and variables are accessible.

Chances are variables declared using var keyword are limitless, except if they are declared within a function.

This means if a variable is not inside a function it will be accessible in the whole app😨.

Now try to connect this point with the one before, redeclaration,
now developers have to remember all the variables they have declared in the global/function scope else they find themselves trapped with results they never expect.

Imagine the following…

function sayHi() {
 var name = “Our New User”
 var isLoggedIn = true
 if (isLoggedIn) {
    var name = “Sarah”
    console.log(“Hi” + name) // Sarah
 }
 console.log(“Hi” + name) // Sarah
}

The log inside the if block makes sense, as we are logging the variable defined within this block, but the log outside the if block is the one highlights the problem, it supposed to prints “Our New User” the value of the variable declared outside the if block, but what happens here is the variable name declared within the if block totally replaced the one declared outside the if block and here we have to mention hoisting.

Hoisting😧
Hoisting is the process of lifting variables and functions declarations to the top of their scope.

Variables declared with the keyword var hoisted to the top of the global/function scope and initialized with the value undefined.

Connecting this with the previous point,

function sayHi() {
 var name = “Our New User”
 var isLoggedIn = true
 if (isLoggedIn) {
    var name = “Sarah”
    console.log(“Hi” + name) // Sarah
 }
 console.log(“Hi” + name) // Sarah
}

we now can find out what is happening here, the new variable declared within the if block is hoisted to the top of the function and of course replaced the original one, which justifies why the two console logs prints the same result.

Now as we went through the problems js developers spent a long time fighting with, now let`s move forward how ES2015 saved our day 😉.

Regarding redeclaration, variables declared using either let or const cannot be redeclared within the same scope.

Mentioning the scope, both let and const are block-scoped, a block of code is any set of code within {}, which means if a variable declared using either let or const within {} it won`t be accessible outside these {}, despite they are hoisted to the top of their scop, which is the {}.

Now let’s check out our sayHi function…

function sayHi() {
 let name = “Our New User”
 var isLoggedIn = true // out of our scope
 if (isLoggedIn) {
    let name = “Sarah”
    console.log(“Hi” + name) // Sarah
 }
 console.log(“Hi” + name) // Our New User
}

Now it works as expected the new variable declared within the if block stays within the if block and it does not affect the one outside the if block

But now the question is, which one to use let or const 🤔?!
There is a missing tiny piece to be mentioned in the context of the answer for this question, but for simplicity sake, the answer is, whatever you want😇, just remember that variables declared with let can be updated while those created with const cannot.

thanks for reading, if you have any question or any topic you want me to write about I will be happy to help, and your comments and constructive notes are more than welcome ❤️