A brief analysis of four common ways of writing Javascript declarations of loop variables_Basic knowledge

Where should the loop variable declaration in Javascript be placed?

Habit 1: Use directly without declaring

function loop(arr) { 
 for (i = 0; i < arr.length; i++) { 
  // do something 
 } 
} 

A very dangerous usage habit. Generally, the loop variable will become an attribute on the window object and be used globally, which is very likely to affect the normal logic implementation of the program.
It is important to mention that in strict mode, direct assignment without declaring a variable will directly throw an exception. This should have been done long ago! Quoting a passage from Appendix C of the ecma-262 standard:
"Assignment to an undeclared identifier or otherwise unresolvable reference does not create a property in the global object. When a simple assignment occurs within strict mode code, its LeftHandSide must not evaluate to an unresolvable Reference. If it does a ReferenceError exception is thrown (6.2 .3.2)."
In other words, if an undeclared variable is used again, a ReferenceError exception will be thrown.

Habit 2: Place it in the initial statement block of the for loop and declare

repeatedly

function loop(arr) { 
 for (var i = 0; i < arr.length; i++ ){ 
  // do someting 
 } 
 // console.log(i); 
 for (var i = 0; i < arr.length; i++ ){ 
  // do something else 
 } 
} 

This method seems to be the safest and most standardized. Many students who switch from C and Java to front-end development prefer this way of writing. In fact, this may be due to a misunderstanding of an important concept in Javascript - variables. Scope. Unlike C and Java, Javascript does not have a real block-level scope. That is to say, after the first loop ends, console.log(i) will not print undefined or throw a ReferenceError exception, but will be normal. Print out arr.length.
Of course, although this way of writing has little meaning other than being beautiful, it has long been compatible and does not violate any specifications - the ecma standard does not prohibit repeated declarations of the same variable in a certain scope.

Habit 3: Centrally define

at the top of the function together with other variables

function loop(arr) { 
 var var1; 
 var var2; 
 var i; 
 
 for (i = 0; i < arr.length; i++) { 
  // do something 
 } 
} 

This c89-like variable definition method is almost impeccable in Javascript. It will not cause the misunderstanding that Javascript supports block-level scope, nor pollute the global scope, nor violate any standards and specifications. Mainly The disadvantage is that the declaration of the loop variable and the loop body may be far apart. Without resorting to more code, there seems to be no better solution to this problem other than waiting for major mainstream browser manufacturers to implement the let keyword in ECMAScript 6.

Habit 4: Encapsulate loop code into IIFE

function loop(arr) { 
 (function () { 
  for (var i = 0; i < arr.length; i++) { 
   // do something 
  } 
 })(); 
} 

The last habit is IIFE (Immediately-Invoked Function Expression), which is familiar to front-end programmers, which means executing the function immediately. The main disadvantages of this method are that it is relatively troublesome to write and has unnecessary performance loss (very small), but it performs well in terms of compatibility and compliance with various standards. Developers can take this approach if it's not too troublesome.

The above is a brief introduction and analysis of the writing habits of four common loop variable definitions in Javascript. Each has its own pros and cons. Readers can choose the best according to their own needs.