no-loop-func

Запрещает объявление функций, содержащих небезопасные ссылки внутри операторов цикла

Написание функций внутри циклов часто приводит к ошибкам из-за того, как функция создаёт замыкание вокруг цикла. Например:

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

В этом случае вы ожидаете, что каждая функция, созданная внутри цикла, вернёт разное число. На самом деле, каждая функция возвращает 10, потому что это было последнее значение i в области видимости.

let или const устраняют эту проблему.

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

В этом случае каждая функция, созданная внутри цикла, возвращает ожидаемое разное число.

Подробное описание правила

Эта ошибка выводится, чтобы выделить фрагмент кода, который может работать не так, как ожидается, а также может указывать на неправильное понимание работы языка. Ваш код может работать без проблем, если вы не исправите эту ошибку, но в некоторых ситуациях он может вести себя неожиданно.

Это правило запрещает любые функции внутри цикла, которые содержат небезопасные ссылки (например, на изменённые переменные из внешней области видимости). Это правило игнорирует IIFE, но не функции async или генераторы.

Примеры неправильного кода для этого правила:

/*eslint no-loop-func: "error"*/

var i = 0;
while(i < 5) {
    var a = function() { return i; };
    a();

    i++;
}

var i = 0;
do {
    function a() { return i; };
    a();

    i++
} while (i < 5);

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;

var arr = [];

for (var i = 0; i < 5; i++) {
    arr.push((f => f)(() => i));
}

for (var i = 0; i < 5; i++) {
    arr.push((() => {
        return () => i;
    })());
}

for (var i = 0; i < 5; i++) {
    (functionfun(){if(arr.includes(fun))return i;else arr.push(fun);})();
}

Примеры правильного кода для этого правила:

/*eslint no-loop-func: "error"*/

var a = function() {};

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

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

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

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

var arr = [];

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

for (var i = 0; i < 5; i++) {
    arr.push((f => f)((() => i)()));
}

for (var i = 0; i < 5; i++) {
    arr.push((() => {
        return (() => i)();
    })());
}

Версия

Это правило было добавлено в ESLint v0.0.9.

Ресурсы

• Исходный код правила
• Исходный код тестов