Difference between Var, let and const in ES6 or javascript.
A lot of new features came with ES6 and it's assumed that a lot
of JavaScript developers have become familiar with and have started using these
features.
One of the features that came with ES6 is addition of let and const which
can be used for variable declaration. The question now is, what makes them
different from our good of var which
has been in use? If you are still not clear about this,
Here I am going to
explain to you.
In this
post, var, let and const will be
discussed with respect to their scope, use and hoisting. As you read, take note
of the differences between them.
VAR
Before the advent of ES6, var declarations ruled
as King. There are issues associated with variables declared with var though.
That is why it was necessary for new ways to declare variables to emerge. First
though, let us get to understand var more before we
discuss one of such issues.
Scope of var
Scope essentially
means where these variables are available for use. var declarations
are globally scoped or function/locally scoped. It is globally scoped when a var variable is
declared outside a function. This means that any variable that is declared with var outside a
function block is available for use in the whole window. var is function
scoped when it is declared within a function. This means that it is available
and can be accessed only within that function.
To understand in detail, look at below example.
var global = "hey global";
function newFunction() {
var local = "hey local";
}
Here, global is
globally scoped because it exists outside a function while local is function scoped. So we cannot access the variable local outside of a function. So if we
do below code:
var global = "hey
hi";
function newFunction() {
var local = "hello";
}
console.log(local); // error: local is not
defined
We'll get an error which is as a result of local not being
available outside the function.
var
variables can be re-declared and updated
We can do within the
same scope we won’t get any error.
var global = "hey hi";
var global = "say Hello instead";
and also below code.
var global = "hey hi";
greeter = "say Hello instead";
Hoisting of var
Hoisting is a JavaScript
mechanism where variables and function declarations are moved to the top of
their scope before code execution.
console.log (global);
var global =
"say hello";
It is
interpreted as this
var global;
console.log(global); //global is undefined
global =
"say hello"
So var variables are hoisted to the top of its scope and initialized
with a value of undefined.
Problem with var
There's
a weakness that comes with var. I'll use the
example below to explain this.
var global = "hey
hi";
var times = 4;
if (times > 3) {
var global = "say Hello
instead";
}
console.log(global)
//"say Hello instead"
So, since times >
3 returns true, global is redefined
to "say Hello instead". While this is not a problem if you knowingly
want global to be redefined, it
becomes a problem when you do not realize that a variable global has already been defined before.
If you have use global in other parts of your code, you
might be surprised at the output you might get. This might cause a lot of bugs
in your code. This is why the let
and const is necessary.
LET
let is
preferred for variable declaration now. It's no surprise as it comes as an
improvement to the var declarations.
It also solves this problem that was raised in the last subheading. Let's
consider why this is so.
let is
block scoped
A block is chunk of code bounded by {}. A block lives in curly
braces. Anything within curly braces is a block. So a variable declared in a
block with the let is
only available for use within that block. Let me explain this with an example.
let global = "say
Hi";
let times = 4;
if (times > 3) {
let local = "say Hello
instead";
console.log(local);//"say Hello
instead"
}
console.log(local)
// local is not defined
We see that using local
outside its block(the curly braces where it was defined) returns an error. This
is because let variables are block scoped .
let can be updated but
not re-declared.
Just like var, a variable declared with let can be updated within its scope.
Unlike var, a let variable cannot be re-declared within its scope. So while this
will work,
let global = "say
Hi";
global =
"say Hello instead";
this will return an
error.
let global = "say Hi";
let global =
"say Hello instead";//error: Identifier ‘global ‘has already been
declared
However, if the
same variable is defined in different scopes, there will be no error.
let global = "say Hi";
if (true) {
let global =
"say Hello instead";
console.log(global);//"say
Hello instead"
}
console.log(global);//"say
Hi"
Why is there no error? This is because both instances are treated as different variables since they have different scopes.
This fact makes let a better choice than var. When using let, you don't have to bother if you have used a name for a variable before as a variable exists only within its scope. Also, since a variable cannot be declared more than once within a scope, then the problem discussed earlier that occurs with var does not occur.
Hoisting of let
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
Variables declared with the const maintain constant values. const declarations share some similarities with let declarations.
const declarations are block scoped
Like let declarations, const declarations can only be accessed within the block it was declared.
const cannot be updated or re-declared
This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this
const global = "say Hi";
global = "say
Hello instead";//error : Assignment to constant variable.
nor this
const global= "say Hi";
const global=
"say Hello instead";//error : Identifier 'global' has already been
declared
Every const
declaration therefore, must be initialized at the time of declaration.
This behavior is
somehow different when it comes to objects declared with const. While a const
object cannot be updated, the properties of this objects can be updated.
Therefore, if we declare a const
object as this
const global = {
message :
"say Hi",
times : 4
}
while we cannot do this
const global = {
words :
"Hello",
number :
"five"
}//error :
Assignment to constant variable.
we can do this
global.message = "say Hello instead";
This will update the
value of global.message without
returning errors.
Hoisting of const
Just like let, const declarations are
hoisted to the top but are not initialized.
Finally, Differences between var, let and const.
var declarations are globally scoped or function scoped while let and const are block scoped.
var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
They are all hoisted to the top of their scope but while varvariables are initialized with undefined, let and const variables are not initialized.
While var and let can be declared without being initialized, const must be initialized during declaration.
