JSLint claims certain recursive function calls are "out of scope"

Question

I have a JavaScript snippet with a recursive function call:

(function () {
    "use strict";

    var recurse = function (x) {
        if (x <= 0) {
            return;
        }
        return recurse(x - 1);
    };

    recurse(3);
}());

This does nothing but call itself a few times, but it runs.

Pasting the above into JSLint gives me this error:

'recurse' is out of scope.

However, if I paste in the following snippet, (using a function declaration instead of var):

(function () {
    "use strict";

    function recurse(x) {
        if (x <= 0) {
            return;
        }
        return recurse(x - 1);
    }

    recurse(3);
}());

JSLint loves it, no errors.

I know that the goal of JSLint is to prevent bugs in JavaScript code. Does anyone know why JSLint thinks the first one is bad JavaScript? What bug am I preventing by not making a recursive call in the first way?

EDIT: To any future visitors to this question: Neither of these JavaScript snippets throw any errors in the latest version of JSLint.

Answer 1

There is nothing wrong with either style. As far as I can tell, this is an inappropriate warning.

The issue appears to be that a variable declaration that includes an assignment does not cause JSLint to register the presence of the declared variable name in scope until the entire assignment is evaluated. That is, when JSLint reads var recurse = ..., it does not realize recurse is a declared variable until after it evaluates the right-hand side of the assignment. In this case, the right-hand side includes a function that makes use of the declared variable recurse, but JSLint didn't know about the existence of recurse yet, because it hadn't finished parsing the entire assignment.

Consider that this code works exactly the same as your var example but produces no warnings in JSLint:

(function () {
    "use strict";

    var recurse;
    recurse = function (x) {
        if (x <= 0) {
            return;
        }
        return recurse(x - 1);
    };

    recurse(3);
}());

By drawing out var recurse as a separate statement, JSLint first learns that recurse is declared in the current scope, and then parses the assignment. With your combined var recurse = ... (which, again, is not wrong), JSLint erroneously parses the assignment first and then learns about the existence of recurse.