What are the differences between variables created using `let`, `var` or `const`?
Variables declared using the var
keyword are scoped to the function in which they are created, or if created outside of any function, to the global object. let
and const
are block scoped, meaning they are only accessible within the nearest set of curly braces (function, if-else block, or for-loop).
function foo() {// All variables are accessible within functions.var bar = 'bar';let baz = 'baz';const qux = 'qux';console.log(bar); // barconsole.log(baz); // bazconsole.log(qux); // qux}console.log(bar); // ReferenceError: bar is not definedconsole.log(baz); // ReferenceError: baz is not definedconsole.log(qux); // ReferenceError: qux is not defined
if (true) {var bar = 'bar';let baz = 'baz';const qux = 'qux';}// var declared variables are accessible anywhere in the function scope.console.log(bar); // bar// let and const defined variables are not accessible outside of the block they were defined in.console.log(baz); // ReferenceError: baz is not definedconsole.log(qux); // ReferenceError: qux is not defined
var
,let
and const
declared variables are all hoisted. var
declared variables are auto-initialised with an undefined value. However, let
and const
variables are not initialised and accessing them before the declaration will result in a ReferenceError
exception because they are in a "temporal dead zone" from the start of the block until the declaration is processed.
console.log(foo); // undefinedvar foo = 'foo';console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initializationlet baz = 'baz';console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initializationconst bar = 'bar';
Redeclaring a variable with var
will not throw an error, but let
and const
will.
var foo = 'foo';var foo = 'bar';console.log(foo); // "bar"let baz = 'baz';let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' has already been declared
let
and const
differ in that let
allows reassigning the variable's value while const
does not.
// This is fine.let foo = 'foo';foo = 'bar';// This causes an exception.const baz = 'baz';baz = 'qux';
Notes
- Since most browsers support
let
andconst
these days, usingvar
is no longer recommended. If you need to target older browsers, write your code usinglet
, and use a transpiler like Babel to compile your code to older syntax.