javascript - Whatέ#39;s the difference between using let and var

Mots clés : javascriptscopeecmascript-6varletjavascript

meilleur 4 Réponses javascript - Whatέ#39;s the difference between using let and var

vote vote

96

function run() {   var foo = "Foo";   let bar = "Bar";    console.log(foo, bar); // Foo Bar    {     var moo = "Mooo"     let baz = "Bazz";     console.log(moo, baz); // Mooo Bazz   }    console.log(moo); // Mooo   console.log(baz); // ReferenceError }  run();
var funcs = []; // let's create 3 functions for (var i = 0; i < 3; i++) {   // and store them in funcs   funcs[i] = function() {     // each should log its value.     console.log("My value: " + i);   }; } for (var j = 0; j < 3; j++) {   // and now let's run each one to see   funcs[j](); }
function run() {   console.log(foo); // undefined   var foo = "Foo";   console.log(foo); // Foo }  run();
function checkHoisting() {   console.log(foo); // ReferenceError   let foo = "Foo";   console.log(foo); // Foo }  checkHoisting();
var foo = "Foo";  // globally scoped let bar = "Bar"; // not allowed to be globally scoped  console.log(window.foo); // Foo console.log(window.bar); // undefined
'use strict'; var foo = "foo1"; var foo = "foo2"; // No problem, 'foo1' is replaced with 'foo2'.  let bar = "bar1";  let bar = "bar2"; // SyntaxError: Identifier 'bar' has already been declared
vote vote

86

for(var i=1; i<6; i++) {    $("#div" + i).click(function () { console.log(i); });  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <p>Clicking on each number will log to console:</p>   <div id="div1">1</div>  <div id="div2">2</div>  <div id="div3">3</div>  <div id="div4">4</div>  <div id="div5">5</div>
for(let i=1; i<6; i++) {    $("#div" + i).click(function () { console.log(i); });  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <p>Clicking on each number will log to console:</p>   <div id="div1">1</div>  <div id="div2">2</div>  <div id="div3">3</div>  <div id="div4">4</div>  <div id="div5">5</div>
vote vote

76

// i IS NOT known here // j IS NOT known here // k IS known here, but undefined // l IS NOT known here  function loop(arr) {     // i IS known here, but undefined     // j IS NOT known here     // k IS known here, but has a value only the second time loop is called     // l IS NOT known here      for( var i = 0; i < arr.length; i++ ) {         // i IS known here, and has a value         // j IS NOT known here         // k IS known here, but has a value only the second time loop is called         // l IS NOT known here     };      // i IS known here, and has a value     // j IS NOT known here     // k IS known here, but has a value only the second time loop is called     // l IS NOT known here      for( let j = 0; j < arr.length; j++ ) {         // i IS known here, and has a value         // j IS known here, and has a value         // k IS known here, but has a value only the second time loop is called         // l IS NOT known here     };      // i IS known here, and has a value     // j IS NOT known here     // k IS known here, but has a value only the second time loop is called     // l IS NOT known here }  loop([1,2,3,4]);  for( var k = 0; k < arr.length; k++ ) {     // i IS NOT known here     // j IS NOT known here     // k IS known here, and has a value     // l IS NOT known here };  for( let l = 0; l < arr.length; l++ ) {     // i IS NOT known here     // j IS NOT known here     // k IS known here, and has a value     // l IS known here, and has a value };  loop([1,2,3,4]);  // i IS NOT known here // j IS NOT known here // k IS known here, and has a value // l IS NOT known here 
vote vote

64

{   let a = 123; };  console.log(a); // ReferenceError: a is not defined 

Questions similaires