Utility functions

Besides element methods, the $ object has utility functions for plain data: merge objects, iterate over values, build a parameter string. Some of them have been replaced by built-in JavaScript features, but older code uses them all the time.

$.extend: merging objects

$.extend() copies properties from the following objects into the first one. A typical case is default settings extended with user settings:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const defaults = { sort: 'date', perPage: 10, showDone: true };
  const options = { perPage: 20 };
 
  const settings = $.extend({}, defaults, options);
 
  console.log(settings.sort, settings.perPage, settings.showDone); // date 20 true
  console.log(defaults.perPage); // 10
</script>

The first argument is an empty object, so defaults stays unchanged. If defaults came first, its properties would be overwritten.

Deep merging

A regular merge replaces nested objects entirely. With true as the first argument, nested objects are merged property by property:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const defaults = { colors: { done: 'gray', todo: 'black' } };
  const options = { colors: { done: 'green' } };
 
  const shallow = $.extend({}, defaults, options);
  const deep = $.extend(true, {}, defaults, options);
 
  console.log(shallow.colors.todo); // undefined
  console.log(deep.colors.todo);    // black
</script>

$.each: iterating arrays and objects

$.each() iterates over an array (the function gets the index and value) or an object (the key and value):

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const counts = { todo: 2, done: 5 };
 
  $.each(counts, function (key, value) {
    console.log(key + ': ' + value);
  });
</script>

The output has two lines: todo: 2 and done: 5. As with the each() method, returning false stops the loop.

$.param and $.isEmptyObject

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  console.log($.param({ q: 'bread & milk', page: 2 })); // q=bread+%26+milk&page=2
  console.log($.isEmptyObject({}));                    // true
</script>

$.param() turns an object into an address parameter string; this is how jQuery prepares data for requests. $.isEmptyObject() checks that an object has no properties.

Deprecated functions

Some functions appeared when JavaScript had no equivalent yet. They have been deprecated since jQuery 3 and are removed in jQuery 4:

The same in plain JavaScript

$.extend({}, a, b) corresponds to Object.assign({}, a, b) or { ...a, ...b }; structuredClone() makes a deep copy of one object. $.each over an object is Object.entries(obj).forEach(...), $.param is new URLSearchParams(obj).toString().

Common mistake

Writing $.trim(title) in new code. It works while the site runs jQuery 3, but after upgrading to jQuery 4 the call fails with $.trim is not a function. Use the built-in title.trim().