IMG-LOGO

What is the difference between const, let and var in Javascript ES6+?

andy - 14 Nov, 2017 2446 Views 0 Comment
What is the difference between const, let and var in Javascript ES6+?

In Javascript ES6+ you may find declarations of variables using const, let and var. In this tutorial, I will explain what is the difference between them. Let start with const declaration.

const declaration

const declaration is used for declaring a read-only reference to its value. It means you can't assign reassign the variable. See this example below.

<script>
const c = 10;
c = 20;
</script>

if you try to reassign the variable c to another object value for example 20, you will get the following error.

Uncaught TypeError: Assignment to constant variable.

The const declaration does not mean the value it holds is immutable, It means if you declare an object as const declaration, you are still allowed to change the member of the object properties, but not the actual object type itself. See the following example.

<script>
const customer = {
	Name: 'Michael',
	Age: 20
}
customer.Age = 22;
console.log(customer);
</script>

You will notice that your const declaration still a customer object but now has a different Age value.

let declaration

The let declaration is used when you try to declare a variable limited in a scope of the block, statement or expression. If you see the following example, you are allowed to have the same let variable c declaration as long as they are in the different scope. The first c declaration is actually under window scope while the next c declaration is under testing function scope.

<script>
let c = 23; 

testing = function(){
	let c = 50;
}

testing();
</script>

Note: you cannot have the same let declaration in the same scope of the block, statement or expression. See the following example.

<script>
testing = function(){
	let c = 50;
	
	//try redeclare the variable c
	let c = 20;
}

testing();
</script>

You will receive the following error message Identifier 'c' has already been declared if you try to re-declare the same variable in the same scope.

var declaration

This is the weakest declaration you can choose as they can be used in any scope and be assigned different value or object. See the following example.

<script>
var customer = {
	Name: 'Michael',
	Age: 20
}
console.log(customer);

//re-assign different value
customer = 10;
console.log(customer);
</script>

if you are dealing with the huge and complex application. Unless if you are using quite a unique var declaration, I would recommend you to use const for global declaration and let if they are in particular scope. For var, you still can use it but I would suggest you use it by using unique identifier name for example, so they can be easily remembered and hardly re-declared.

<script>
var _MY_CUSTOMER_NAME = 'Michael';
var _BOX_HEIGHT = 100;
</script>

By using a unique identifier, it will be less error to use var. Hopefully, this article helps you.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Articles