How to override (replace, alter) JavaScript file used by Drupal module with your own version

NOTE: Here you can learn how to create an ultra simple custom module for Drupal 7 (Drupal 8 don’t have “ultra simple” modules).

This is the scenario: I have edited friendly_register.js file belonging to the Friendly register module in order to make a better CSS sprint (less http requests == site loads faster). I did it using hook_js_alter function in my custom module called “Customer“. I placed an updated version of JS file right into the Customer’s folder.

This is how the result hook looks like:

/**
   * Path to friendly_register.js override. I have added <span class="icon_check"></span>
   * into default /js/friendly_register.js in order to make better css sprint.
   */
  function  customer_js_alter(&$javascript) {
    $javascript[drupal_get_path('module', 'friendly_register') . '/js/friendly_register.js']['data'] = drupal_get_path('module', 'customer') . '/friendly_register.js';
  }

If you want to place overriden JavaScript file into your theme folder (“js” subfolder), the code doing the job will be:

/**
   * Path to friendly_register.js override. I have added <span class="icon_check"></span>
   * into default /js/friendly_register.js in order to make better css sprint.
   */
  function  customer_js_alter(&$javascript) {
    $javascript[drupal_get_path('module', 'friendly_register') . '/js/friendly_register.js']['data'] = path_to_theme() . '/js/friendly_register.js';
  }

This post is based on the solution from this answer.