0

Is this true:

Statements or assignments that can be placed outside the loop will make the loop run faster.

Bad:

var i;
for (i = 0; i < arr.length; i++) {

Better Code:

var i;
var l = arr.length;
for (i = 0; i < l; i++) {

https://www.w3schools.com/js/js_performance.asp

Update:

What is the purpose of declaring i before the loop?

Pingpong
  • 7,681
  • 21
  • 83
  • 209
  • 4
    "*What is the purpose of declaring i before the loop?*" super old coding style. It's basically irrelevant nowadays. And mostly irrelevant back in the day. The only reason it was used before was to remind programmers that there was no block scope, so all variables are declared at the beginning of the function. – VLAZ Mar 06 '21 at 21:15
  • 2
    Looking at that page, it's yet another example why W3Schools is not a good reference. I know it's better *today* but it's now merely below average to bad. The only useful advice on the page is "Reduce DOM Access". Which should also be self-evident - looking up an element multiple times is going to...look up the element multiple times. Even then, looking up by ID should be the fastest possible, so the example given could have been more relevant. – VLAZ Mar 06 '21 at 21:20
  • any better javascript learning resources you could kindly recommend? Hope it will not get deleted by SO. – Pingpong Mar 06 '21 at 21:26
  • 1
    the Mozilla Developer Network wiki (MDN) is exceptionally high quality and well maintained. It includes relevant documentation and good useful examples. See [the article on `for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) and [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) for example. – VLAZ Mar 06 '21 at 21:29
  • 2
    Things like this are not worth worrying about here in 2021. JavaScript runtime optimizations and modern device computing bandwidth make it completely irrelevant unless you're processing millions of things in a series, and even if that's true the best thing to do would be to figure out how to stop processing millions of things in a series. – Pointy Mar 06 '21 at 21:32
  • @VLAZ on Learning JS from MDN, it is a huge site. Please could you point out what areas can be used for Intermediate - advanced? – Pingpong Mar 06 '21 at 23:51

1 Answers1

1

It could make the code a tiny bit faster. In the first snippet, every time there's an iteration, the engine has to evaluate

arr.length

looking up the size of the array which might take a bit more processing time than looking up what integer a plain variable refers to.

In the second snippet, you only have to look up the size of the array once, instead of on every iteration.

That said, given how fast computers are nowadays, this consideration is almost certainly irrelevant in 99.9% of situations. Better to write clean and readable code first, and then optimize performance only if it becomes a problem.

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • 3
    As far as I'm aware, the `arr.length` check is already optimised by all major browsers. Even IE after 8. So, I don't think this has really been slowing down execution for about a decade. – VLAZ Mar 06 '21 at 21:12
  • What is the purpose of declaring i before the loop? – Pingpong Mar 06 '21 at 21:14
  • 2
    @Pingpong It's probably to make the `var` hoisting explicit, but `var` should be considered deprecated and obsolete nowadays. Better to write in modern syntax (with `const` and `let`), then transpile down to ES5 or ES6 for production – CertainPerformance Mar 06 '21 at 21:18
  • but var has to be used for support of IE11. Is there an alternative for var in this case? – Pingpong Mar 06 '21 at 21:21
  • 2
    @Pingpong Like I said - transpile down to ES5 or ES6 for production automatically, to keep your source code clean and readable with `const` and `let`, while continuing to allow obsolete browsers to understand your code. Don't dumb down your source code for the sake of obsolete browsers, instead transpile your production code for them. – CertainPerformance Mar 06 '21 at 21:22
  • 1
    @Pingpong Fun fact, IE11 "works" with `let` and `const`. However, they are just aliases for `var` and will not do block scope. `const` can also be reassigned. Still, transpile your code - that's the best practice as it avoids many problems. – VLAZ Mar 06 '21 at 21:25