Difference between let and var
The difference between var and let. var is scoped to the nearest function block and let is scoped to the nearest enclosing block, which can be smaller than a function block. Both are global if outside any block.
let can also be used to avoid problems with closures. It binds fresh value rather than keeping an old reference.
Also, variables declared with let are not accessible before they are declared in their enclosing block. this will throw a ReferenceError exception.var able accessible but getting undefined.
<html> <head> </title> Difference between var and let</title> </script> var html = ''; write('==== global ==== '); write('globalVar: ' + globalVar); //undefined, but visible try { write('globalLet: ' + globalLet); //undefined, *not* visible } catch (exception) { write('globalLet: exception'); } write(' Set variables'); var globalVar = 'Global Value'; let globalLet = 'Global Let'; write(' globalVar: ' + globalVar); write('globalLet: ' + globalLet); function functionScoped() { write(' ==== function ===='); write(' functionVar: ' + functionVar); //undefined, but visible try { write('functionLet: ' + functionLet); //undefined, *not* visible } catch (exception) { write('functionLet: exception'); } write(' Set variables'); var functionVar = 'Function Var'; let functionLet = 'Function Let'; write(' functionVar: ' + functionVar); write('functionLet: ' + functionLet); } function blockScoped() { write(' ==== block ===='); write(' blockVar: ' + blockVar); //undefined, but visible try { write('blockLet: ' + blockLet); //undefined, *not* visible } catch (exception) { write('functionLet: exception'); } for (var blockVar = 'blockVar', blockIndex = 0; blockIndex < 1; blockIndex++) { write(' blockVar: ' + blockVar); // visible here and whole function }; for (let blockLet = 'blockLet', letIndex = 0; letIndex < 1; letIndex++) { write('blockLet: ' + blockLet); // visible only here }; write(' blockVar: ' + blockVar); try { write('blockLet: ' + blockLet); //undefined, *not* visible } catch (exception) { write('functionLet: exception'); } } function write(line) { html += (line ? line : '') + '<br />'; } functionScoped(); blockScoped(); document.getElementById('results').innerHTML = html; </script> <head> <body> <pre id="results"></pre> </body> </html>
Answer
==== global ==== globalVar: undefined globalLet: exception Set variables globalVar: Global Value globalLet: Global Let ==== function ==== functionVar: undefined functionLet: exception Set variables functionVar: Function Var functionLet: Function Let ==== block ==== blockVar: undefined functionLet: exception blockVar: blockVar blockLet: blockLet blockVar: blockVar functionLet: exception
Global
Very similar when we used like this outside a function block.
let me = 'go'; // globally scoped
var i = 'able'; // globally scoped
Global variables defined with let will not be added as properties on the global <code>window</code> object, but able to do var.
console.log(window.me); // undefined
console.log(window.i); // 'able'
Function:
They are identical when used like this in a function block.
function ingWithinEstablishedParameters() {
let terOfRecommendation = 'awesome worker!'; //function block scoped
var sityCheerleading = 'go!'; //function block scoped
}
Block:
Difference is in block level. let is only visible in the for() loop and var is visible to the whole function.
function allyIlliterate() { //letval is *not* visible out here for( let letval = 0; letval < 5; letval++ ) { //letval is only visible in here (and in the for() parentheses) //and there is a separate letval variable for each iteration of the loop } //letval is *not* visible out here } function byE40() { //varval *is* visible out here for( var varval = 0; varval < 5; varval++ ) { //varval is visible to the whole function } //varval *is* visible out here }
Redeclaration:
Assuming strict mode, var will let you re-declare the same variable in the same scope. On the other hand, let will not:
'use strict';
let me = 'foo';
let me = 'bar'; // SyntaxError: Identifier 'me' has already been declared
'use strict';
var me = 'foo';
var me = 'bar'; // No problem, `me` is replaced.