Published on: 14 November, 2017

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

Posted by andy | 98 views 0 likes 0 favourites 0 comments
Tumblr Digg Google Plus
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.
Share your article with us and add your own google adsense account to earn extra money. Plus, you can promote a link back to your site.
Related Articles
Published on: 20 June, 2016
Google Analytics is one of the best free analytics site tracker. It gives you an idea the statistic of your visitors like the country they come from, the URL or keyword they search to go to your site or even the demographic or ages of your visitors. If you are a developer, you definitely do not want to track any data when you are in development phase. In this tutorial, you will learn how to disable google analytics for local development by using a javascript code if condition.
Published on: 13 May, 2016
To convert a number value into money format in Javascript can be done easily using Javascript. Firstly you will need to use the built in toFixed function that will return a number value into two decimal point and then using a regular expression to reformat the value.
Published on: 16 March, 2016
If you try to search this particular topic in Google Search, you will come up with a list of different solutions. Most of them will use the document or body height to compare if there is a difference, we assume there will be a scroll bar. Unfortunately it doesn't work well, most of them it will return the same height.
Related Tutorials