jQuery shorthand for the document ready wrapper function

If you use jQuery, you know the $(document).ready() wrapper is the standard way to make sure the DOM is fully loaded before your JavaScript runs. But writing it out every time gets repetitive. There’s a shorthand that does exactly the same thing with fewer keystrokes.

The long version

$(document).ready(function() {
  // your code here
});

The shorthand

$(function() {
  // your code here
});

That’s it. $(function() { ... }) is equivalent to $(document).ready(function() { ... }). jQuery internally maps the shortcut to the same event handler, so there’s no performance difference — it’s purely a readability and typing convenience.

What about the arrow function?

If you’re writing modern JavaScript, you can also use arrow functions:

$(() => {
  // your code here
});

All three forms do the same thing. Pick whichever you find easiest to read.

Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *