functions inside or outside jquery document ready

Question

Up until now I just put all my jQuery goodness inside the $(document).ready() function, including simple functions used in certain user interactions.

But functions that don´t require the DOM document to be loaded or are only called afterwards anyway, can be placed outside the $(document).ready() as well. Consider for example a very simple validation function such as:

function hexvalidate(color) {
// Validates 3-digit or 6-digit hex color codes 
 var reg = /^(#)?([0-9a-fA-F]{3})([0-9a-fA-F]{3})?$/;
 return reg.test(color);
}

The function is only called from within the $(document).ready() function though.

What is best practice (syntax, speed); placing such a function inside or outside the jquery document ready function?

Answer 1

Put it inside so it won't pollute the global namespace. It also ensures a faster resolve of the function name because of JavaScript's scope chains.

Put it outside if it's a reusable component so you could easily move it in a separate file and call from different contexts.

Since you already use JQuery, it's worth mentioning, that in your case you may want to define hexvalidate as a JQuery plugin outside and then invoke it inside.

Answer 2

I don't think you should be using any 'just functions' in the first place. In OOP javascript a "function" usually belongs to one of four distinct types:

• Constructor or an anonymous 'init' closure - used to construct objects. The only type of function that is allowed to be global
• Method - function that is a part of some object
• Utility - inner function of a constructor/method, invisible from outside
• Constant - a functional constant passed as a parameter

e.g.

 (function() { <- init closure

        function helper1() { <- utility }

        globalSomething = {

              foobar: function() { <- method 
                  xyz.replace(/.../, function() { <- constant })

              }
        }
  )()

In your example, 'hexvalidate' is obviously a part of Validator object, which, in turn, can be made a jQuery plugin:

   (function($) {
        $.validate = {
            hexColor: function(color) { ... your code }
            more validators...
        }
     )(jQuery)