Var, Let and Const. Which one we should use

Let’s find out JavaScript variable declaration method.

I start learning JavaScript 3 months ago. As a beginner, I face a lot of questions. One of them is Why should I use Let or Const instead of var. I watch many tutorials about this. When I watch all those tutorial I decided to use Var. Because the first method I learned about the variable declaration is var. And it is easy to use. But later when I start working on project I face many bugs and issues. let me explain which one we should use.

Var

Before Es6 var declarations ruled.There are some issues with var . That is why it was necessary for new ways to declare variables to emerge.let’s get to understand var more before we discuss those issues.

Scope of var

OK! What is scope? What does it means? scope means where these variable are available for use. var declarations are globally scoped or function/locally scoped. When var variable is declared outside a function is called global scope. This means any variable that is declared with var outside a function block is available for use in the whole window.

var is function scope when variable declared inside a function. That means variable available and can be accessed only inside that function.

Example :

// This is global scope

    var doSomething = "Done";

// This is function scope
    
   function sayHi (){ 
    var name = "Shakib"
}

doSomething is a global scope variable. We can access this variable any where we want to. But sayHi is a function scope. we can not access it outside of a function. if we do this :

// This is global scope

var doSomething = "Done";

// This is function scope
    
   function sayHi (){ 
    var name = "Shakib";
}
  console.log(name); // error: name is not defined

we will get an error. Because name is not available outside of sayHi function.

Re-declare and Update var variable

we can Re-declared and update inside the same scope and won’t get an error.

var doSomething = "Done";
doSomething = "Not Done";

when we want to access a var variable before we declare it we will get undefined .Why we get undefined instead of the error? Because when a code execute JavaScript move all the variable and function to the top. That’s why we get undefined .Moving to the top is called hosting.

console.log(name);
var name = "Shakib";

when we execute this code. JavaScript move the variable to the top before execution. Like this

var name;
console.log(name);
name = "Shakib";

Issues with var

As a beginner var is a very helpful feature. But we may have to declare variables of the same name when working on project. And that’s will cause us some bug. Let’s see a code.

var doSomething = "Not Done";
money = 5;
if (money > 2){ 
 var doSomething = "Done";
}
console.log(doSomething);

So, money > 2 return true, doSomething redefined to Done .This is not a problem while you knowingly want doSomething to be redefined.But it becomes a problem when you do not know that a variable doSomething has already been defined before.This will likely cause a lot of bugs in your code. This is why let and const are necessary.

Let

let is one of the methods to declare a variable in Es6. And it solve the issues with var variable that we just covered.

let is block scoped

what is block scoped? Anything inside curly braces {} is a block.

variable declared in a block with let is only available for use inside that block.Let me explain this by an example

let money = 5;
if (money > 2){ 
 var doSomething = "Done";
}
console.log(doSomething); // doSomething is not defined.

when we console.log doSomething we will get an error. Because we used doSomething outside its scope.

let can be updated

Unlike var variable, we can not re-declare let variable. But let can be updated.

let point = 1;
point = 5; //we updated the let vaiable.

this will return an error:

let point = 1;
let point = 5;

However, if the same variable is defined in different scopes, there will be no error:

let doSomething = "Not Done";
money = 5;
if (money > 2){ 
 let doSomething = "Done";
 console.log(doSomething); // return Done.
}
console.log(doSomething); // return Not Done.

Just like var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.

Const

Another method to declare a variable in Es6 is const.Variables declared with the const maintain constant values. const share some similarities with let declarations.

const is block scoped

Like let declarations, const declarations can only be accessed within the block they were declared.

const cannot be updated or re-declared

We can not update or re-declare const variable.This means that a variable declared with const remains the same within its scope.If we declare a variable with const, we can neither do this:

const UserName = "Elon Musk"

UserName = "Bill Gates" 
//error message : invalid assignment to const 'userName'.

nor this :

const UserName = "Elon Musk"
const UserName = "Bill Gates"
//error message : 'UserName' has already been declared.

There is some different when it comes to objects declared with const. We can not update a const object.But we can update object properties. If we declare a const object:

const userInfo = { 
 name : "Elon Musk",
 number : 00000000
}

we can not do this :

const userInfo = { 
 name : "Bill Gates",
 number : 1111111
}
//// error message:  Assignment to constant variable.

we can do this :

userInfo.name = "Jeff Bezos";

we just update userInfo.name value. Without any error.

Just like let, const declarations are hoisted to the top but are not initialized.

So, we learned what var let and const is . I mostly use const. If there is any possibility that a variable can be updated in the future I use let.You should also use let and const rather than var .

Thank you for reading this.

Originally published on Medium (opens in a new tab).