While the majority of the time, we would want to leave the existing JS components to work their magic as is, there are times when business requirements are drastic enough to make the whole component unusable. Thinking in terms of PHP classes, we can imagine that class A implements X, whereas we want to have a completely different implementation of X, let's call it B, that shares very little with A. This is a case where simply having B extends A would not suffice, so we opt for directly B implements X. While there are no interfaces in pure JS, this does not mean we cannot completely replace one concrete class with another, as long as we ensure those few crucial methods are available via the new class.

Replacing JS classes is easy with Magento. Let's imagine we want to fully replace the redirectUrl component.

We start by creating the <MODULE_DIR>/view/frontend/requirejs-config.js file, as follows:

var config = {
  map: {
    '*': {
      redirectUrl: 'Magelicious_Jsco/js/redirect-url'
    }
  }
};

We then implement the actual Magelicious_Jsco/js/redirect-url as part of the <MODULE_DIR>/view/frontend/web/js/redirect-url.js file, as follows.

define([
    'jquery',
], function ($) {
    'use strict';
    $.widget('magelicious.redirectUrl', {
        _create: function () {
            // New implementation
            console.log('magelicious.redirectUrl'),
        }
    });
    return $.magelicious.redirectUrl;
});

magelicious.redirectUrl matches the new name of our widget, whereas magelicious is our namespace and redirectUrl is the actual name of the widget within our namespace.

Once we refresh the static content via the php bin/magento setup:static-content:deploy command, we should now be able to see magelicious.redirectUrl show up in the browser console window. Clearly, the current implementation of redirectUrl would break the functionality we had with the original component, but it goes to show how easily we can fully replace the component with a new one.