How to use $.extend in vanilla js?

Question

I have been using jQuery for a long time, so while coding in Vanilla JS I am kind of wondering about how can we use something similar to $. extend in vanilla JS.

Answer 1

There are basically these three approaches -

1. Easiest way is to use Object.assign() function

Syntax - Object.assign(target, ...sources)

So you can code in following way -

var obj1 = { a: 1, c:4 };
var obj2 = { a: 2, b:3 };
var copy = Object.assign(obj1, obj2);
console.log(copy); // { a: 2, c: 4, b: 3 }

Even deep cloning is possible refer Mozilla Doc.

2. Otherwise if you want to use extend in code. One describe extend as below - Taken from this post Vanilla JavaScript version of jQuery.extend()

   /* Pass in the objects to merge as arguments.
      For a deep extend, set the first argument to `true`.*/
   
   
   var extend = function () {
   
   // Variables
   var extended = {};
   var deep = false;
   var i = 0;
   var length = arguments.length;
   
   // Check if a deep merge
   if ( Object.prototype.toString.call( arguments[0] ) === '[object Boolean]' ) {
       deep = arguments[0];
       i++;
   }
   
   // Merge the object into the extended object
   var merge = function (obj) {
       for ( var prop in obj ) {
           if ( Object.prototype.hasOwnProperty.call( obj, prop ) ) {
               // If deep merge and property is an object, merge properties
               if ( deep && Object.prototype.toString.call(obj[prop]) === '[object Object]' ) {
                   extended[prop] = extend( true, extended[prop], obj[prop] );
               } else {
                   extended[prop] = obj[prop];
               }
           }
       }
   };
   
   // Loop through each object and conduct a merge
   for ( ; i < length; i++ ) {
       var obj = arguments[i];
       merge(obj);
    }
          return extended;
   };
   

With this definition in code extend() function can be used for extending objects as mentioned below -

var newObjectShallow = extend(object1, object2, object3);

3. If object is simple (no deep cloning needed) following approach can be used - more details are mentioned here

   var extend = function ( defaults, options ) {
   var extended = {};
   var prop;
   for (prop in defaults) {
       if (Object.prototype.hasOwnProperty.call(defaults, prop)) {
           extended[prop] = defaults[prop];
       }
   }
   for (prop in options) {
       if (Object.prototype.hasOwnProperty.call(options, prop)) {
           extended[prop] = options[prop];
       }
   }
   return extended;
   };
   

Hope this helps anybody searching for $.extend implementation in native js