Where should I put functions in Javascript code?

Question

I have the following code:

(function($) {
  "use strict";

  $(function() {
    // jQuery code here, eg:
    $('body').css('padding-top', $('.nav').height());
    // I want to call that func here...
  });

}(jQuery));

And custom function:

function xyz(a,b) {
  // do something with "a" and "b"
}

Where should I place my custom function? Before (function($) {, before $(function() {, or inside $(function() {});?

I want to use it inside $(function() { // I want to call that func here... }); — Rafff
– Rafff, Commented Mar 17, 2014 at 14:53

mvw · Accepted Answer · 2014-03-17 15:33:44Z

2

The difference is the scope.

Location              :  Scope
----------------------+--------------------------------------------------------
before (function($) { :  in global scope, easy to call & modify from everywhere 
before $(function() { :  in "source module" scope / jQuery closure
inside $(function() { :  in "$(function" scope

So that choice gives you the means to organize the access to your code. In most cases you want to hide stuff to prevent unintended interactions, but in some cases (e.g. log function), you want to have access from everywhere in your web application.

If you do not need to call xyz() from outside $(function, keep it inside. If you do just need to call it within the module, keep it inside ( .. (jQuery)). If you need to call it from everywhere keep it outside in global scope.

edited Mar 17, 2014 at 15:33

answered Mar 17, 2014 at 15:17

mvw

5,1151 gold badge30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2014-03-17 14:54:02Z

1

Since you want to call the function inside the ready handler, declare it inside it

jQuery(function ($) {
    "use strict";

    // jQuery code here, eg:
    $('body').css('padding-top', $('.nav').height());
    // I want to call that func here...
    xyz();

    function xyz(a, b) {
        // do something with "a" and "b"
    }
});

But if you want to access xyz from outside the scope of the dom ready handler you will have to declare it outside the scope of the dom ready handler. Now the method is local to the dom ready handler and thus accessible only inside it.

Also as shown above you can shorten the use of IIFE and dom ready handler as shown above

answered Mar 17, 2014 at 14:54

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

Where should I put functions in Javascript code?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related