Difference between let and var

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.

0 Comments

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

>