For performance purposes, I want to know what the difference is in ES6 JavaScript between:

var list = [...];
let item; //let outside the loop
for (let i = 0; i < list.length; i++) {
    item = list[i];
}

and

var list = [...];
for (let i = 0; i < list.length; i++) {
    const item = list[i]; //const inside the loop
}

Assume that the item variable is intended to remain constant inside the loop.

Is one recommended? What are the pros and cons relative to performance for each? Does GC handle them differently?

Note that this is micro-optimization. Furthermore, performance is subjective to the JS engine being used.. (see answers)

For performance purposes, I want to know what the difference is in ES6 JavaScript between:

var list = [...];
let item; //let outside the loop
for (let i = 0; i < list.length; i++) {
    item = list[i];
}

and

var list = [...];
for (let i = 0; i < list.length; i++) {
    const item = list[i]; //const inside the loop
}

Assume that the item variable is intended to remain constant inside the loop.

Is one recommended? What are the pros and cons relative to performance for each? Does GC handle them differently?

Note that this is micro-optimization. Furthermore, performance is subjective to the JS engine being used.. (see answers)

• javascript
• performance
• loops
• constants
• let

• Performance is rarely something to worry about, but I don't think there should be any notable difference (though you might consider measuring the length once, rather than on each iteration). That said, using const inside the loop is most certainly the best option for readability. – CertainPerformance Commented Jun 12, 2018 at 1:12
• 1 Premature optimization is the root of all evil – Barmar Commented Jun 12, 2018 at 1:18
• 1 @MaxK Did your performance tests indicate that this is a bottleneck? If you haven't identified it as a place that needs tuning, then it's premature optimization. – Barmar Commented Jun 12, 2018 at 1:21
• 1 There's a garbage collection cost to marking something constant. The object is treated differently in the VM; also the cost of allocating an item and then freeing it at the end of each loop seems unreasonable. Although the impact is probably small on a few iterations, this seems like an anti-optimization – Stand__Sure Commented Jun 12, 2018 at 1:32
• 1 for (let item, i = 0; – Slai Commented Jun 12, 2018 at 1:32

3 Answers 3

It's going to be difficult to give a definitive answer considering that different browsers have vastly different internal implementations. There could very likely be zero difference. Prior to execution, Javascript in the browser is compiled by the internal JIT compiler, which will very likely recognise a redundant variable declaration inside a loop and optimise it out, like any other good compiler. let and const will definitely affect this, I'd say const would make optimisation out of the loop even more likely considering the compiler can instantly see that it's an immutable atomic variable specific to the inner loop scope. It would also likely unroll performance intensive loops as well. Javascript has a few other performance quirks though where accessing variables in higher scopes incurs a minor performance penalty, I remember looking into that a long time ago when doing gamdev in the browser. That might not be current anymore, but it was a few years ago.

As others have pointed out, unless profiling has already indicated that this is a serious bottleneck in your application, it is premature optimisation. I'd be extremely shocked if optimising this could possibly contribute any significant performance benefits. If performance in this area matters, best advice is to profile different scenarios yourself and decide what is best for your use case.

For readability and best practices, it's usually better to keep the scope of variables as limited as possible. By using const inside the loop. Having the variable declared with let outside the loop may lead to bugs because you may be using that variable later.

In the first example, item is scoped outside the loop, so the final value assigned will be available in whatever the enclosing scope. In the latter example, item is undefined after the loop closes. You will also be unable to reassign item inside the loop, as it's a const and not let.

Personally, I'd use the second, unless there's a reason to use the first. The performance difference would be minimal, but slightly worse for the second example, due to additional need for variable allocations.

Disclaimer: I now consider the following to be conjecture and would hesitate suggesting that it should be selected as an answer until it can be confirmed. Until then, I will keep it here available for comments and confirmation; it will be deleted if found incorrect.

There are two things to consider:

1. let vs const
2. variable declaration within the loop

Both will be dependent on browser implementation, thus the performance is not set in stone; however, typically the first (declaring a let outside the loop) should yield a more efficient result as declaring variables generally takes more OPS than solely value assignment.

It is important to note that the efficiency of the result will be effected by several factors. These include, but are not limited to:

• the resources of the system used to execute the code
• the type of operation performed (if different from the initial example)
• the length of the list and size of its values

While it is difficult to determine how much more efficient the code would be, it is important to note under average conditions (average multi-core desktop w/ at least 2GB of RAM) with an average-sized list (e.g., 5k elements), the differences in results will be nano-to-micro seconds and considering such a difference is generally considered to be a micro-optimization.