JavaScript中var与let关键字差异解析及代码异常原因排查

Let's break down the core differences between var and let first, then dive into why you might see discrepancies between your two code snippets.

Core Differences Between var and let #

• Scope:
  • var is function-scoped: it's accessible anywhere within the function it's declared in (even outside loops or conditional blocks inside that function).
  • let is block-scoped: it only exists within the nearest enclosing block (like the {} of a for loop, if statement, etc.).
• Hoisting & Temporal Dead Zone (TDZ):
  • var gets hoisted to the top of its function scope and initialized to undefined—you can reference it before declaration without an error (though the value will be undefined).
  • let is also hoisted, but it doesn't get initialized until its declaration line. Accessing it before declaration throws a ReferenceError (this is the TDZ).
• Re-declaration:
  • You can re-declare the same var variable multiple times in the same scope without issues.
  • Re-declaring a let variable in the same scope throws a SyntaxError.
• Global Binding:
  • When declared in the global scope, var attaches itself to the window object (in browsers) or global (in Node.js).
  • let declared globally doesn't attach to these global objects—it stays in a separate global scope.

Analyzing Your Code Snippets #

Wait a second—if we run both your code snippets as-is, they actually produce the same output ([3, 2, 1])! The var and let versions of your array-reversing function work identically here because we're only using i inside the loop block.

But if you're seeing an error with the let version, it's almost certainly because you're trying to access i outside the for loop block somewhere in your actual code. Let's demonstrate that scenario:

Modified var Version (Works) #

function revarr(arr) { 
  for (var i = 0; i < arr.length / 2; i++) { 
    [arr[i], arr[arr.length - 1 - i]] = [arr[arr.length - 1 - i], arr[i]]; 
  } 
  console.log(i); // Outputs 2 (since var is function-scoped)
  return arr; 
} 
console.log(revarr([1, 2, 3])) // [3, 2, 1]

Modified let Version (Throws Error) #

function revarr(arr) { 
  for (let i = 0; i < arr.length / 2; i++) { 
    [arr[i], arr[arr.length - 1 - i]] = [arr[arr.length - 1 - i], arr[i]]; 
  } 
  console.log(i); // Throws ReferenceError: i is not defined
  return arr; 
} 
console.log(revarr([1, 2, 3]))

Why This Happens:

• With var, i is function-scoped, so it exists throughout the entire revarr function—even after the loop finishes.
• With let, i is block-scoped to the for loop's {} block. Once the loop ends, i is no longer accessible, hence the ReferenceError.

Another common scenario where var and let behave differently is with asynchronous code inside loops (like setTimeout), but that doesn't apply to your synchronous array-reversing function.

内容的提问来源于stack exchange，提问作者sunny singh