0

I have the following code which in it's simplest form consists of calling a function when the DOM is fully loaded. I am using a function declaration so that I can call myFunction both before and after it is defined.

/*global $*/

$(function() {
    "use strict";

    myFunction();

    function myFunction() {

        // do something
    }
});

If the function is called before the declaration then JSLint gives the following error:

'myFunction' is out of scope.

If I put the function declaration before I call the function then JSLint gives no errors. However this defeats the whole point of using a function declaration (being able to call the function before and after the definition.

/*global $*/

$(function() {
    "use strict";

    function myFunction() {

        // do something
    }

    myFunction();
});

Can someone explain why this is the case? I think I have an understanding about what out of scope means for variables but I don't understand how this applies to function declarations.

Kevin Morse
  • 244
  • 2
  • 13
  • 1
    It's not actually out of scope - that message is misleading. – nnnnnn Feb 02 '16 at 09:01
  • Looks to be a duplicate of [this](http://stackoverflow.com/questions/12963161/function-was-used-before-it-was-defined-jslint) except that it seems that, since that question was asked, the error message has become significantly more cryptic. I gave up on JSLint in favour of JSHint (since it has better reporting and fewer opinions that I disagree with). – Quentin Feb 02 '16 at 09:01
  • If you really feel this should be down voted perhaps provide a comment explaining how to improve this question? There are other questions about variables being used before they're defined but they are not the same error. – Kevin Morse Feb 02 '16 at 09:01
  • @nnnnnn care to explain what it actually means then? – Kevin Morse Feb 02 '16 at 09:06
  • 1
    It means the person who wrote JSLint doesn't like you to structure your code that way, but they didn't word the message correctly. The code will work, but some people believe that nested functions should be declared at the top of their containing function, above where they're called. Other people like to do the opposite and put nested functions underneath. I don't think it matters as long as you are consistent. (I'd treat JSLint errors like that as "suggestions", not hard and fast rules.) – nnnnnn Feb 02 '16 at 11:27
  • +1 for @nnnnnn -- JSLint believes that defining a function after using it is confusing. And that makes some sense if you'd like your code to feel more procedural. Imagine if there's lots of cruft between `myFunction()` and its declaration. *I'd* expect myFunction to have been defined earlier, you know? I wouldn't be thrown off for long, but that's unintuitive in general. JSLint enforces consistency, and when you have a large team, having so many inarguable rules is actually quite useful. But as @nnnnnn says, the error's wording is really misleading here. – ruffin Feb 02 '16 at 13:46
  • Perhaps worth adding that JSLint doesn't like *any* functions, nested or not, to be called before they're defined. One task I often perform on unlinted code is putting functions in "dependency order", so to speak. Functions without in-scope calls first, then slowly add those that call what's above... – ruffin Feb 02 '16 at 13:49
  • Thanks for the explanations everyone. With the AJAX app that I'm currently linting I have been following the convention of defining variables, then defining handlers, and finally defining helper functions at the very end. – Kevin Morse Feb 02 '16 at 23:15

0 Answers0