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";
}
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";
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"
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
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
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
const pokemon="squirtle";
pokemon="Blastoise"; //error: Identifier 'pokemon' has already been declared
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)