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

JavaScript: What is the difference between var, let and const in Javascript?

Many years ago we could only use var when defining variables. However, now we have a couple of other additions: let and const (since es6/2015). This is a guide to the differences between them.

Using var

This is the 'old' and classic way to do it.

With var you can change the variable data after setting it.

  1. var website_name = "webdevetc.com";
  2. console.log(website_name); // 'webdevetc.com'
  3. website_name = "web dev etc"; // you can change the variable's data  with var
  4. console.log(website_name); // 'web dev etc'

You can also init a variable without setting its value (it will be set to undefined.

  1. var website_name ;
  2. console.log(website_name); // undefined
  3.  
  4. website_name = "web dev etc";
  5. console.log(website_name); // 'webdevetc.com'

Using Let

Let is similar to var.

  1. let website_name = "webdevetc.com";
  2. console.log(website_name); // 'webdevetc.com'
  3. website_name = "web dev etc"; // you can change the variable's data  with var
  4. console.log(website_name); // 'web dev etc'
  5.  
  6.  
  7. // and you can use let to init a variable without settings its value:
  8. let another_website; // undefined
  9. another_website = "example.com";

And finally, const

Const (which stands for constant) is a little bit different than the other two.

You can set it (initialise it) with a value in a similar way to let/var. However you cannot change its value, or init it without setting the data.

  1. const website_name = "webdevetc.com";
  2. console.log(website_name); // 'webdevetc.com'
  3.  
  4. // trying to change its value: ERROR!
  5. website_name = "web dev etc"; // ERROR! Cannot change it!
  6.  
  7.  
  8. // using const without a value for the variable - ERROR
  9. const another_website; // ERROR! Must set its value when initialising it

However, if a const is set to an object then you can change the object itself (but the const will always 'point' at the same object. This is because you're not really changing the const's value. If it was a literal string/number (e.g. const foo = 'bar'; or const foo = 123) you can't change it. But if it is an object you can change the object's properties. I hope this makes sense?

  1. const website_name = { is_this_an_object: true, website_url: "https://webdevetc.com/"} ;
  2. console.log(website_name); //{is_this_an_object: true, website_url: "https://webdevetc.com/"}
  3. console.log(website_name.website_url); //https://example.com
  4.  
  5. // trying to change a value IN THE OBJECT - this is ok
  6. website_name.website_url = "https://example.com";
  7. console.log(website_name.website_url); // https://example.com

BTW, arrays are objects. So the following works ok!

  1. const websites = [ "https://webdevetc.com", "https://google.com"] ;
  2. console.log(websites); //(2) ["https://webdevetc.com", "https://google.com"]
  3.  
  4. websites.push("http://example.com"); // add (push) example.com to the websites array
  5. console.log(websites); //(3) ["https://webdevetc.com", "https://google.com", "http://example.com"]
  6.  
  7. websites = ["another_array"]; // ERROR! cannot change it to a new object
webdevetc profile pic
webdevetc

I am a 29 year old backend web developer from London, mostly focusing on PHP and Laravel lately. This (webdevetc.com) is my blog where I write about some web development topics (PHP, Laravel, Javascript, and some server stuff). contact me here.



More...


Comments and discussion about What is the difference between var, let and const in Javascript?

Found this interesting? Maybe you want to read some more in this series?

Or see other topics in the JavaScript language

Or see other languages/frameworks:
PHP Laravel Composer Apache CentOS and Linux Stuff WordPress General Webdev and Programming Stuff JavaScript
Or see random questions

How to add comments in PHP

How to add the CSRF (Cross-site request forgery) token in Laravel?

How to sort an array in javascript?

What are the SPL Iterators in PHP?

What is an example of an object literal?

How to check if a user is logged in, inside a blade file?

How to install jpegtran for Linux CentOS

How to check if a object has a static variable defined?

How to find out which php.ini file PHP is using?

How to set the Expires header in .htaccess