Writing functions within loops tends to result in errors due to the way the function creates a closure around the loop. For example:

for (var i = 0; i < 10; i++)
    funcs[i] = function() {
        return i;
    };
}

In this case, you would expect each function created within the loop to return a different number. In reality, each function returns 10, because that was the last value of i in the scope.

let or const mitigate this problem.

for (let i = 0; i < 10; i++) {
    funcs[i] = function() {
        return i;
    };
}

In this case, each function created within the loop returns a different number as expected.

Bad Practice

for (let i = 10; i; i--) {
    (function() { return i; })();
}

while(i) {
    const a = function() { return i; };
    a();
}

do {
    function a() { return i; };
    a();
} while (i);

let foo = 0;
for (let i = 0; i < 10; ++i) {
    //Bad, `foo` is not in the loop-block's scope and `foo` is modified in/after the loop
    setTimeout(() => console.log(foo));
    foo += 1;
}

for (let i = 0; i < 10; ++i) {
    //Bad, `foo` is not in the loop-block's scope and `foo` is modified in/after the loop
    setTimeout(() => console.log(foo));
}
foo = 100;

Recommended

let a = function() {};

for (let i = 10; i; i--) {
    a();
}

for (let i = 10; i; i--) {
    const a = function() {}; // OK, no references to variables in the outer scopes.
    a();
}

for (let i = 10; i; i--) {
    const a = function() { return i; }; // OK, all references are referring to block scoped variables in the loop.
    a();
}

const foo = 100;
for (let i = 10; i; i--) {
    const a = function() { return foo; }; // OK, all references are referring to never modified variables.
    a();
}
//... no modifications of foo after this loop ...

willtheorangeguy / Note-Style-Guide

No ignore rules found