DEV Community

Cover image for Differences between Let Var Const that you didn't know - ES6 [Video + Article]
Tharun Shiv
Tharun Shiv

Posted on

Differences between Let Var Const that you didn't know - ES6 [Video + Article]

In this post we will discuss the differences between the let, var and const along with code examples and their outputs

Video:

Consider subscribing to the Youtube Channel if you find it helpful 😊 https://youtube.com/c/developerTharun

What are Let Var and Const

In order to use a variable in JavaScript, you will have to declare that variable. Before ES6, we had only var using which we used to declare variables. From ES6 onwards let and const were introduced and there are some significant differences that you need to know among these.

The differences

We will look at the differences in three aspects:

  1. Function or block scoped
  2. Redeclaring
  3. Redefining

1. Function or block scoped

Var: Function scoped: This means that once a variable is declared using var, it is accessible anywhere within that function. This sounds nice, but we will face problem when we use var in a for-loop, and the variable leaks out.

for (var i = 0; i < 5; i++) {
  console.log(i);
}

console.log(i); // i is still accessible here
Enter fullscreen mode Exit fullscreen mode

Output

0
1
2
3
4
5
Enter fullscreen mode Exit fullscreen mode

Let: Block Scoped: A block is nothing but a piece of code that is enclosed by the curly braces { }. So when a variable is declared using the let, it will stay within that block and doesn't leak out.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

console.log(i); // the variable i is not accessible here
Enter fullscreen mode Exit fullscreen mode

Output

0
1
2
3
4
console.log(i);
            ^
ReferenceError: i is not defined
Enter fullscreen mode Exit fullscreen mode

Const: Block Scoped: The variable declared with const has a block scope just like let, and isn't accessible outside the scope.

{
  const i = 10;
  console.log(i);
}

console.log(i);
Enter fullscreen mode Exit fullscreen mode

Output

10
console.log(i);
            ^
ReferenceError: i is not defined
Enter fullscreen mode Exit fullscreen mode

Redeclaring

Var: Can be Redeclared: The variables declared using var can be declared again using var anywhere in the program.

var cat = "meow";
var cat = "psssss"; // no error
Enter fullscreen mode Exit fullscreen mode

Let: Cannot be Redeclared: The variables declared using let cannot be redeclared within the same scope of it.

let dog;

let dog; // causes error
Enter fullscreen mode Exit fullscreen mode

Output

let dog;
    ^
SyntaxError: Identifier 'dog' has already been declared
Enter fullscreen mode Exit fullscreen mode

Const: Cannot be Redeclared: The variables declared using const cannot be redeclared within the same scope of it.

const lion;

const lion; // causes error
Enter fullscreen mode Exit fullscreen mode

Output

const lion;
      ^
SyntaxError: Identifier 'lion' has already been declared
Enter fullscreen mode Exit fullscreen mode

3. Redefining

Var: can be redefined: Defining is different from declaring in the sense that, defining assigns a value to the variable.

var dog = "boww";
dog = "voww"; // no error
Enter fullscreen mode Exit fullscreen mode

Let: can be redefined: Defining is different from declaring in the sense that, defining assigns a value to the variable.

let cat = "meow";
cat = "prrr"; // no error
Enter fullscreen mode Exit fullscreen mode

Const: cannot be redefined: This results in an error. This applied to the scope only.

const lion = "roar";
lion = "rooor"; // cannot redefine
Enter fullscreen mode Exit fullscreen mode

Output

const lion = "roooor";
      ^
SyntaxError: Identifier 'lion' has already been declared
Enter fullscreen mode Exit fullscreen mode

Summary

Summary

If you liked this article, give it a ❤ 🦄 and Save it for later. Subscribe to my YouTube Channel if you like it https://youtube.com/c/developerTharun

You might like this

Written by

[deleted user] image

[Deleted User]

Top comments (18)

Collapse
 
elmuerte profile image
Michiel Hendriks

Unlike other languages const in JavaScript does not make the reference immutable. So, it's not really constant, merely final in its assignment.

Collapse
 
venkat121998 profile image
venkat anirudh

Ah I see, didn't know that. Thanks 👍

Collapse
 
developertharun profile image
Tharun Shiv

Thank you for contributing 🙂

Collapse
 
riotfallen profile image
Dimas Maulana Dwi Saputra

Thanks for explaining!

Collapse
 
developertharun profile image
Tharun Shiv

Yes.. 🙂

Collapse
 
harshpyati0798 profile image
Harsh Pyati

The examples helped a lot in grasping the differences. Thanks for the article.

Collapse
 
developertharun profile image
Tharun Shiv

Thanks! 🙂

Collapse
 
developertharun profile image
Tharun Shiv

Yeah, true that. Thanks for contributing 🙂

Collapse
 
developertharun profile image
Tharun Shiv

Let me know if you liked the article and how I can improve in writing blogs. 😊 Thank you for reading. 🦄

Collapse
 
praveenreddy1798 profile image
praveenreddy1798

Good article.. 👍

Collapse
 
developertharun profile image
Tharun Shiv

Thanks!

Collapse
 
venkat121998 profile image
venkat anirudh

The summary helps... good one.. keep it up!

Collapse
 
developertharun profile image
Tharun Shiv

Thank you

Collapse
 
chandrika56 profile image
Jaya chandrika reddy

Keep going!

Collapse
 
developertharun profile image
Tharun Shiv

Definitely! Thank you😊

Collapse
 
uma_bcc profile image
umamaheswari.v

Good one 🙌 the examples made things easier

Collapse
 
developertharun profile image
Tharun Shiv

Glad it helped 🙂

Collapse
 
venkat121998 profile image
venkat anirudh

Yep