Change record status: 
Project: 
Introduced in branch: 
8.x
Introduced in version: 
8.x-dev
Description: 

JavaScript should be made compatible with libraries other than jQuery by adding a small wrapper around your existing code:

(function ($, Drupal) {
  // Original JavaScript code.
})(jQuery, Drupal);

This wrapper is an anonymous closure that provides state throughout the page's lifetime and ensures your code does not unintentionally create/override global variables.

It also explicitly imports the global jQuery variable so that your code can use the local $ variable instead of the jQuery global. This is essential because Drupal loads jQuery with noConflict() compatibility so the jQuery library does not setup the normal $ as a global variable.

The wrapper above also explicitly refers to the Drupal global. It is good JavaScript coding practice to explicitly list the globals your code is relying on in this way. It will also minify better.

A detailed explanation of this JavaScript pattern can be found in the article JavaScript Module Pattern: In-Depth.

Impacts: 
Site builders, administrators, editors
Module developers
Themers
Updates Done (doc team, etc.)
Online documentation: 
Not done
Theming guide: 
Not done
Module developer documentation: 
Not done
Examples project: 
Not done
Coder Review: 
Not done
Coder Upgrade: 
Not done
Other: 
Other updates done