DEV Community

Cover image for let or const or var? When to use what?
Vignesh Pugazhendhi
Vignesh Pugazhendhi

Posted on

let or const or var? When to use what?

Unlike most programming languages, javascript variables are declared with the var keyword. Before es6, var was much prevalent and was commonly used to declare and initialize variables. Javascript is a weird language. Expect the unexpected when working with js. So, what was the need of two new keywords when var does everything you need to declare and initialize variables. Well, there are three main issues to be looked upon next time you decide to use var.

Scope

Variables declared with var keyword can be either globally scoped or locally scoped(inside a function or a block of code).By globally scoped, I mean the variable is accessible throughout the document or in the whole window. Locally scoped variables are available only within the function body or block of code in which it is declared.

var pokemon="pikachu";
function catchNewPokemon(){
  var newPokemon="charmendar";
}
Enter fullscreen mode Exit fullscreen mode

Here, pokemon is globally scoped and newPokemon is locally scoped.
newPokemon cannot be accessed outside the function. Doing so will throw a reference error.

Redeclaration
A variable declared with var keyword can be redeclared within the same scope. Doing so might produce buggy codes.

var pokemon="Bulbasaur";
var pokemon="Ivasaur";
Enter fullscreen mode Exit fullscreen mode

Let's say you declare a variable pokemon in line 119 of your production code and again re-declare pokemon in line 556 unknowingly.
The subsequent code after line 556, will be carrying a value you assigned to it in line 556.

Hoisting

All variables declared with var are automatically hoisted to the top of their scopes. For example :

console.log(pokemon)
var pokemon="pikachu"
Enter fullscreen mode Exit fullscreen mode

will throw no undefined variable error as pokemon is hoisted automatically to the top of it's scope.

Now, to overcome the above issues, ECMAScript, an internationally recognized standard, has come up with two new keywords let and const.

let
let is by default block scoped. Now matter how many times you declare the same variable in your code, the compiler won't throw an error unless the variables are in different scopes.

let pokemon="pikachu";
const catchPokemon=()=>{
   let pokemon="bulbasaur";
   console.log(pokemon)  //consoles bulbasaur
}
console.log(pokemon) //consoles pikachu
Enter fullscreen mode Exit fullscreen mode

Also, variable declared with let can only be updated and cannot be declared within the same scope.

let pokemon="pikachu";
let pokemon="raichu"; //error:Identifier pokemon has been already declared
Enter fullscreen mode Exit fullscreen mode

Like var, variables declared with let are hoisted to the top of their scopes. The only difference is, here they are not initialized as undefined. You will get a reference error if you try to use a variable before it is declared.

const

Identifiers declared with const are block scoped and cannot be updated once they are declared and initialized. Infact, declaration and initialization happens at the same time. You cannot declare a const and initialize it later.

const pokemon;
pokemon="pikachu"; //error: Uncaught SyntaxError: Missing initializer in const declaration
Enter fullscreen mode Exit fullscreen mode
const pokemon="squirtle";
pokemon="Blastoise"; //error: Identifier 'pokemon' has already been declared
Enter fullscreen mode Exit fullscreen mode

Try using let everywhere in the code whenever you declare a variable.
Use const only if you need an identifier to carry a constant value throughout your code.

Top comments (0)