functions inside or outside jquery document ready

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)

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.


one advantage of putting those functions inside the document ready function is that they don't pollute your global namespace... with the downside that if you need them somewhere else on the page they won't be available.