Why How to Use a Function Before It's Defined in JavaScript

Why can I use a function before it's defined in JavaScript?

The function declaration is magic and causes its identifier to be bound before anything in its code-block* is executed.

This differs from an assignment with a function expression, which is evaluated in normal top-down order.

If you changed the example to say:

var internalFoo = function() { return true; };

it would stop working.

The function declaration is syntactically quite separate from the function expression, even though they look almost identical and can be ambiguous in some cases.

This is documented in the ECMAScript standard, section 10.1.3. Unfortunately ECMA-262 is not a very readable document even by standards-standards!

*: the containing function, block, module or script.

Using javascript function before its definition

The function declaration:

function isNimble(){ return true; }

is defined when the code is parsed (i.e. before any code is executed), wherease the function expression:

var canFly = function(){ return true; };

is evaluated when the code is running, so the function isn't callable until after this line is executed. That's the difference causing the second example to fail.

Does a Javascript function have to be defined before calling it?

When you assign a function to a variable, you have to assign it before you can use the variable to access the function.

If you declare the function with regular syntax instead of assigning it to a variable, it is defined when code is parsed, so this works:

$(document).ready( function() {

    delay(openModal, 2000);

    function openModal() {
        $('#modal-box').css( {
            left: $(window).width() / 2 - $('#modal-box').width() / 2,
            top: $(window).height() / 2 - $('#modal-box').height() / 2
        } );
        $('#modal-box').show();
        $('#modal-mask').show();
    };  

});

(Note the difference in scope, though. When you create the variable openModal implicitly by just using it, it will be created in the global scope and will be available to all code. When you declare a function inside another function, it will only be available inside that function. However, you can make the variable local to the function too, using var openModal = function() {.)

JSLint: Using a function before it's defined error

If you declare functions using the function keyword, you can use them before they're declared. However, if you declare a function via another method (such as using a function expression or the Function constructor), you have to declare the function before you use it. See this page on the Mozilla Developer Network for more information.

Assuming you declare all your functions with the function keyword, I think it becomes a programming-style question. Personally, I prefer to structure my functions in a way that seems logical and makes the code as readable as possible. For example, like you, I'd put an init function at the top, because it's where everything starts from.

For what purpose 'no-use-before-define' warns about declared functions?

Quoting the rule documentation page (emphasis mine):

In JavaScript, prior to ES6, variable and function declarations are
hoisted to the top of a scope, so it’s possible to use identifiers
before their formal declarations in code. This can be confusing and
some believe it is best to always declare variables and functions
before using them.

There does not appear to be a way to warn only if not hoisted. You could create a custom plugin.

How can you use a function that is defined below its usage?

This is the difference between function declaration and function expression. This difference described well for example here.

Invoking a function before it is defined is ok if inside exports

In the first case the function is being called before it is defined, that's why the error occurs:

f1(); // <- function is called before the function expression is evaluated
f1 = () => { console.log("f1"); }

In the second case the function is not called at all, instead it may be called in future by the module consumer.

exports.x = () => {
  f1(); // <- it will be called only if a module consumer will execute the module as a function
}

f1 = () => { console.log("f1"); }

In order to call the module as a function, the module consumer will have to import the module. When a module is imported, all the module code is evaluated (including our function expression). Therefore, by the time the module consumer calls the module as a function, the function expression will be evaluated.

In javascript, only the function call before it's defined in the same script tag works

The entire first script tag is parsed and executed before the second one is considered. As part of parsing a script, function declarations are recognized ahead of time, which is why the second one works while the first one doesn't.

JavaScript: The Definitive Guide

JavaScript statements that appear between and tags are executed in order of appearance; when more than one script appears in a file, the scripts are executed in the order in which they appear. If a script calls document.write( ), any text passed to that method is inserted into the document immediately after the closing tag and is parsed by the HTML parser when the script finishes running. The same rules apply to scripts included from separate files with the src attribute.

---

Related Topics