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

Tharun Shiv - May 27 '20 - - Dev Community

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]

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .