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 get a route to directly show a view?

How to add comments in PHP

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

A list of operators on Eloquent's where() method

How to make Apache force download of files (in .htaccess)

How to Force www or non-www in htaccess

How to manually write your own pagination in PHP

How to select what columns to return when calling ::all()

What are PHP's PSRs?

How to Enable Directory Listings in Apache with .htaccess