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

October 26, 2018

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.

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

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

var website_name ;
console.log(website_name); // undefined
website_name = "web dev etc";
console.log(website_name); // 'webdevetc.com'

Using Let

Let is similar to var.

let website_name = "webdevetc.com";
console.log(website_name); // 'webdevetc.com'
website_name = "web dev etc"; // you can change the variable's data  with var
console.log(website_name); // 'web dev etc'
// and you can use let to init a variable without settings its value:
let another_website; // undefined
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.

const website_name = "webdevetc.com";
console.log(website_name); // 'webdevetc.com'
// trying to change its value: ERROR!
website_name = "web dev etc"; // ERROR! Cannot change it!
// using const without a value for the variable - ERROR
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?

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

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

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