Now that we have covered the meaning of scope and the concept of properties of objects it is possible to explain the differences between these three keywords for declaring variables (and constants).
var is flexible and personally I see no reason to stop using it. However, many people say you should now use let and const instead, so we had better look at the differences between these.
This was originally the only way of declaring variables or constants. (Review examples on this earlier page.)
If var is used in the outermost script, outside any functions, the variable is global and it is a property of the global object, which is window in the browser environment. Example:
var x = 42;
console.log (window.x); // Shows 42 in the console window
console.log (x); // 42
If instead var occurs inside a function then it is local. It is not a property of the global object. It will exist throughout the function (even before it is declared, but in that case its value will be undefined). At the end of the function it goes out of scope and the system automatically releases the memory it occupied. Example:
function doSomething ()
{
console.log (x); // undefined
for (var i = 0; i < 10; i++)
{
// ... some code
var x = 42; // NB: inside a loop
}
console.log (x); // 42
}
var is unfussy: if I write another loop inside that function and declare var i again it will not matter. It will mean the very same i but not cause an error.
var does not provide any way of ensuring that a value or reference remains constant. I previously recommended using capital letters for the variable name to remind us, the programmers, if it is meant to be constant.
let is syntactically an alternative to var, by which I mean it can be used in all the same places but there are differences in what it means.
Firstly if it is in the outermost part of a script it is global but it is not attached to the global object.
let x = 42;
console.log (window.x); // undefined
console.log (x); // 42
Inside a pair of curly braces it defines a local variable which goes out of scope at the closing brace. So it is not necessarily available for an entire function, only if declared in the outermost part of the function. Also it cannot be used before it is defined.
function doSomething ()
{
console.log (x); // x does not exist
for (let i = 0; i < 10; i++)
{
// ... some code
let x = 42; // NB: inside a loop
// ... some code
} // x goes out of scope here
console.log (x); // x does not exist
}
let is strict: if I write another loop inside that function and declare let i again it will cause a syntax error and the script will fail.
Behaves like let but with the additional constraint that once a value or an object reference has been assigned it cannot be changed. The keyword enables the interpreter or compiler to check and throw an error if reassignment is attempted.
It is important to note that if an object reference is assigned it does NOT mean that properties or methods of the object cannot change, only that we cannot substitue a different object.
I would still use capital letters for the name of such a constant, to remind me about it.
As usual, Mozilla has good reference pages about these things. Eg, let.