Purpose _.extend / _. Assign?

Question

I saw quite a few tutorials or code examples in which the developer used the Underscore _.extend or Lodash _.assign _.assign , when just adding a property would be sufficient, it always confused me, what is the advantage of using an extension / destination instead of just adding a property? There are many times when I see the benefits of using these methods, for example, when adding several properties from another object, but most often I saw how it was used, as in the example below, where I do not see any benefit.

Are there any advantages that I don't know for the following code instead of assigning a property?

http://tech.pro/tutorial/1734/building-decoupled-javascript-applications-with-postaljs

 var Weather = function() { this.channel = postal.channel( "weather" ); this.channel.subscribe( "fetch", this.fetch ).withContext( this ); }; _.extend(Weather.prototype, { fetch: function( city ) { $.ajax({ url: "http://openweathermap.org/data/2.1/find/name?q=" + city + "&units=imperial", dataType: "jsonp", success: _.bind(function( data ) { this.channel.publish( "fetched", data.list[ 0 ] ); }, this ) }); } }); 

For example, you could not rewrite the above code:

 Weather.prototype.fetch = function(...){...} 

Or is it negative?

Answer 1

It exists for the same reason as jQuery $.extend (including npm port ), and it has nothing to do with performance: to add one object to another object, thereby expanding it with another. The Lodash version allows you to have finer control over the merge process using the customizer function.

Object extensions have several uses that jQuery developers claim to write plugins for :

The improvement we can and should do for the code above is to expose the plugin’s default settings. This is important because it’s very easy for plugin users to override / configure a plugin with minimal code. And here we begin to use the functional object.

 // Plugin definition. $.fn.hilight = function( options ) { // Extend our default options with those provided. // Note that the first argument to extend is an empty // object – this is to keep from overriding our "defaults" object. var opts = $.extend( {}, $.fn.hilight.defaults, options ); // Our plugin implementation code goes here. }; // Plugin defaults – added as a property on our plugin function. $.fn.hilight.defaults = { foreground: "red", background: "yellow" }; 

In the above example, you can clearly see that when working with a predefined object with properties that you need to expand or even overwrite with an unknown object with unknown properties, since this object is outside the control of the developer plugin

---

Sometimes we just don’t know what properties are on the extension object, sometimes it just makes things more readable, and sometimes it’s just inconvenient to do it manually, especially if you need deep merging.

Another application is where you want to model a simple inheritance hierarchy:

 // very trivial example: var Super = { superFoo: function() {} }; var Sub1 = { sub1Foo: function() {} }; var Sub2 = { sub2Foo: function() {} }; $.extend(Sub1, Super) // now Sub1 has Super powers $.extend(Sub2, Super) // now Sub2 has Super powers too 

Answer 2

In many cases, using Object.assign() (or an equivalent library equivalent) allows you to write more functionally. Instead of using multiple statements to add just one object to an object, you can do everything in one large expression.

Procedural:

 function doThing(options) { options.x = 5; return _doThing(options); } 

Functional:

 function doThing(options) { _doThing(Object.assign(options, {x: 5})); } 

In addition, if it is used with an empty object, it idiomatically creates a shallow copy so as not to interfere with the transferred object in ways that could confuse the caller:

 function doThing(options) { _doThing(Object.assign({}, options, {x: 5})); }