JavaScript JSHint - 'close' is defined but never used

Question

I don't know why but some words that I use as function names get a lint error of being defined but never used.

For instance, the code below returns error:

// I am using AngularJS
$scope.close = close;

function close() {
    /* Code here */
}

But this does not:

// I am using AngularJS
$scope.close2 = close2;

function close2() {
    /* Code here */
}

The error is on the line function close() . Why is this such a special name? How can I mute this error?

Answer 1

(Note: Answer has been heavily edited)

Summary

John Papa says to use latedef in JSHint and, at least implicitly, to ignore JSLint issues. ( latedef defined here .)

I believe there's a plays-nicely solution (see below), however, that includes the advantages of Papa's suggested style with code that lints in JSHint and JSLint.

JSHint is "wrong" not to complain about close2 . JSLint catches it exactly like you'd expect.

---

close but not close2 is a JSHint problem

For what it's worth, if you paste your code (jslint formatted Pasteee with both close & close2 here ) into JSLint.com , both close and close2 cause errors. If you're not seeing an error for close2 , I'm guessing it's JSHint's problem, but it'd be more useful to see exactly what you're linting through JSHint (in context) to know for sure.

So close is not a special name to JSLint. I would like to see your "actual" code in context to see if JSLint would say something similar

Just to be clear, this breaks on JSLint.com :

/*jslint sloppy:true, white:true */
/*global $scope */

$scope.close2 = close2;

function close2() {
    return "something";
}

That will produce 'close2' was used before it was defined. $scope.close2 = close2; 'close2' was used before it was defined. $scope.close2 = close2;

If you want to know why JSHint is, I believe, breaking, we can go JSHint code spelunking, but to answer your JS L int tag (at least) the behavior you're seeing isn't happening.

---

How to fix

See this SO answer on exactly what you're discussing here, where John Papa says to use latedef in JSHint . One way around the linting issue is to ignore Papa and define the function first , but, as you mention in your comment, below , that's not ideal.

So here's the best compromise I could come up with...

1. Declare, but don't define, variables that will hold functions.
2. Insert your Angular directive
3. Define your functions from 1.

That definitely mutes the JSHint error, since the code that caused it isn't there any more. If I was doing Angular and needed to follow Papa-style, that's what I'd do to keep Crockford's blessing.

Example:

(function () {
    'use strict';
    // 1. Declare your function names. Minimally spammy!
    var theController;

    // 2. Directive
    angular
        .module('myApp')
        .controller('myAppCtrl', theController);

    // 3. *Define* the functions. No `latedef` needed, and JSLint compliant.
    // Keeps "the list of calls at the top of the page" and allows you to
    // "jump to each definition if you need more details". QED? ;^)
    theController = function () {
        return "so jslint doesn't complain about empty blocks";
    };
}());