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 query mysql using PDO in PHP?

What is the null coalescing operator in PHP7?

How to do comments in Blade files?

What is YAGNI?

How to order a Laravel hasMany relationship?

How to replace values in a string, in JS

Point all requests to one PHP file

How to block IP addresses in Apache by using regular expressions (regex) in .htaccess

PHP Date commonly used formats

How to find the intersection (same values) from two arrays?