Javascript var, let and const
Tags: javascript, learning, beginners
Published: 2020-07-18 20:15:59

---
title: Javascript var, let and const

published: true
description: using var to declare variables developers had to fight in many fields…
tags: #javaScript #learning #beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uyf30vn5q6582d6uffcu.jpeg
---

I hate intros but we must have one 🤷

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:

```js
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…

```js
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,

```js
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...
```js
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` 🤔?!
The answer is, whatever you want😇, just remember that variables declared with `let` can be updated while those created with `const` cannot.

Hope this helps and thanks for reading. If you have any questions or topics you want me to write about I will be happy to help❤️