JavaScript variables declare outside or inside loop?

by

There is absolutely no difference in meaning or performance, in JavaScript or ActionScript.

var is a directive for the parser, and not a command executed at run-time. If a particular identifier has been declared var once or more anywhere in a function body(*), then all use of that identifier in the block will be referring to the local variable. It makes no difference whether value is declared to be var inside the loop, outside the loop, or both.

Consequently you should write whichever you find most readable. I disagree with Crockford that putting all the vars at the top of a function is always the best thing. For the case where a variable is used temporarily in a section of code, it’s better to declare var in that section, so the section stands alone and can be copy-pasted. Otherwise, copy-paste a few lines of code to a new function during refactoring, without separately picking out and moving the associated var, and you’ve got yourself an accidental global.

In particular:

for (var i; i<100; i++)
    do something;

for (var i; i<100; i++)
    do something else;

Crockford will recommend you remove the second var (or remove both vars and do var i; above), and jslint will whinge at you for this. But IMO it’s more maintainable to keep both vars, keeping all the related code together, instead of having an extra, easily-forgotten bit of code at the top of the function.

Personally I tend to declare as var the first assignment of a variable in an independent section of code, whether or not there’s another separate usage of the same variable name in some other part of the same function. For me, having to declare var at all is an undesirable JS wart (it would have been better to have variables default to local); I don’t see it as my duty to duplicate the limitations of [an old revision of] ANSI C in JavaScript as well.

(*: other than in nested function bodies)

More Related Contents:

  1. Convert JSON to array in Javascript
  2. jQuery: load pages with ajax, caching, clean URLs and back button support
  3. How to efficiently count the number of keys/properties of an object in JavaScript
  4. What is the difference between parseInt() and Number()?
  5. When to use Vanilla JavaScript vs. jQuery?
  6. Declaring multiple variables in JavaScript
  7. Array vs. Object efficiency in JavaScript
  8. Why is mutating the [[prototype]] of an object bad for performance?
  9. Good ways to improve jQuery selector performance?
  10. How to stop intense Javascript loop from freezing the browser
  11. What is the cost of ‘$(this)’?
  12. Microsoft CDN for jQuery or Google CDN? [closed]
  13. JavaScript loop performance – Why is to decrement the iterator toward 0 faster than incrementing
  14. Performance differences between visibility:hidden and display:none
  15. Efficient Javascript String Replacement
  16. Prepend text to beginning of string
  17. Javascript prototype operator performance: saves memory, but is it faster?
  18. Are JavaScript Arrays actually implemented as arrays?
  19. Array Join vs String Concat
  20. Is “Put Scripts at the Bottom” Correct? [closed]
  21. How many concurrent setTimeouts before performance issues?
  22. Javascript Set vs. Array performance
  23. Are ES6 template literals faster than string concatenation?
  24. Why is looping through an Array so much faster than JavaScript’s native `indexOf`?
  25. HTML5 Canvas Performance and Optimization Tips, Tricks and Coding Best Practices [closed]
  26. draw 10,000 objects on canvas javascript
  27. How browser executes Javascript and renders asynchronously
  28. Javascript – insert an array inside another array
  29. Does using a document fragment really improve performance?
  30. value of using React.forwardRef vs custom ref prop

Leave a Comment