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

301 Redirect a single URL in .htaccess to a new location

How to block IPv6 IP addresses in .htaccess

How to get a route to directly show a view?

How to undelete a soft deleted Eloquent row?

How to order a Laravel hasMany relationship?

How to query mysql using PDO in PHP?

How to check if a relation was loaded on an Eloquent model already?

How could you include a custom function for every single time PHP runs?

How to reverse htmlentities() / What is the opposite of htmlentities()?

How to add and remove items to an array in JS?