Magento 2: How to Extend core js files or class or function?

Question

I need to extend core js in my module or theme in this case how to do it,

I can achieve it by keeping the complete file in my theme and do the changes, in this case, we will lose updates and if we update Magento then my website will break

How to do it?

Answer 1

We can extend the core js in below way

Create a requirejs-config.js in MYMODULE/view/frontend

var config = {
    config: {
        mixins: {
            'mage/gallery/gallery': {
                'NAMESPACE_MYMODULE/js/gallery_brand_logo': true
            }
        }
    }
};

Then create gallery_brand_logo.js in

code\NAMESPACE\MYMODULE\view\frontend\web\js\gallery_brand_logo.js

define(['jquery','mage/utils/wrapper'], function ($, wrapper) {
    'use strict';

    return function (initialize) {
        return wrapper.wrap(initialize, function (initialize, config, element) {
            // my code before

            initialize(config, element);    

            // my code after
            //brand log
            if(config.brandlog){            
                $('.fotorama__nav-wrap').css('display', 'block');               
                $('.fotorama__nav-wrap').addClass('fotorama__nav-wrap--vertical');

                $('.fotorama__nav').before('<div style="border: 1px solid red;color: red;height: 70px;" class="brandlog"><img src="'+config.brandlog+'" /></div>');             
            }   
            //brand log end
        });
    };
});

Note :- In above I used custom option brandlog, pass this value in product/view/gallery.phtml so i extend product/view/gallery.phtml also and

<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                "brandlog": "<?php /* @escapeNotVerified */ echo $logopath; ?>",
                .
                .
                .

Answer 2

in some case js class as more then one function at that time you can not follow below answer

if you want to extend the specific function follow below code

i just extend the shipping address validation at the time of checkout

/**
 * @author [email protected]
 */
/*jshint browser:true jquery:true*/
/*global alert*/
define([
    'jquery',
    'Magento_Checkout/js/model/quote'
], function ($,quote) {
    'use strict';
console.log("Called this Hook.");

     return function(targetModule){
        //if targetModule is a uiClass based object
        return targetModule.extend({
            validateShippingInformation:function()
            {
                console.log("validateShippingInformation.");
                 this.errorValidationMessage('Pradeep.');
                 //return false;

                 var result = this._super(); //call parent method
                    //do your new stuff
                return result;
            }
        });
        };

});