Extending Objects in jQuery

Welcome to my journey of  extending objects in JavaScript frameworks; let’s explore jQuery! Extending an object in jQuery is simple, there are just a few rules you need to understand. Extension works from left to right and you’re allowed to pass as many objects to the function as you want. Whatever is passed to the $.extend argument last wins.

For instance:



Output:



Again, remember that the last one in wins. It is also worth noting that anything extended with an explicit `undefined` will keep its original value. If you want to override a value with a “falsy” value, use `null`, `false` or anything else that makes sense in your case.

Arrays are always overwritten by the last object passed in.  The objects inside them are at mercy of their parents. It doesn’t matter if they are values or objects, the last object passed in, gets the last call.

For more information: http://api.jquery.com/jQuery.extend/

Related:

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

About Chris Missal

Oh hey, I'm a Senior Consultant for Headspring in Austin, TX. I've been working in software professionally since 2006 and I really, really love it. I'm mostly in the Microsoft world, but enjoy building computer things of all sorts (to be vague). When I'm not slinging code, I'm probably out and about slinging discs, bowling balls, or good beer with great friends.
This entry was posted in JavaScript, jQuery and tagged , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Pingback: Extending Objects with JavaScript | Chris Missal's Blog

  • Pingback: The Morning Brew - Chris Alcock » The Morning Brew #1199

  • Nick Williams

    My favourite use case for this is overlaying function arguments with default values, especially in jQuery plugins.

  • http://twitter.com/henrylearn2rock Henry Ho

    Question: should one use $.extend or _.extend?  

    JSPref indicates $.extend is faster: http://jsperf.com/underscore-extend-performance-test/5

  • http://profiles.google.com/kassem.darwish89 Kassem Darwish

    Very nice. But could you elaborate on the last part (the one that talks about extending an array) of the article please? 

    • http://chrismissal.lostechies.com Chris Missal

      The individual items contained within the array will not be merged. The entire array “overwrites” the previous value. In the example above, the start object has a property “values” containing an array with 7 integers. When extended with the “extra” object, the new value is now an array of 4 integers”.

  • Pingback: Extending Objects in Dojo | Chris Missal's Blog

  • Andrej Fiser

    Maybe you should also mention that the first object (start) is modified and returned. To keep the original start intact you would use 
    var extended = $.extend({}, start, more, extra);

  • Don

    How would you modify an interior object?  Say you had a sequence of buttons like:

                ‘title’ : ‘Great Idea!’,
                ‘message’ : ‘You’re going to make a lot of money with this one!’,            ‘buttons’ : {
                    ‘one’ : {
                        ‘name’ : ‘Yes’,
                    }                ‘two ‘ : {                    ‘name’ : ‘No’,               }               ’three’ : {                   ’name’ : ‘Cancel’,

    How would one modify the ‘name’ property of button ‘two’ using extend?

    • http://chrismissal.lostechies.com Chris Missal

      You can modify it by accessing that object explicitly:

      $.extend(obj.buttons.two, { ’name’: ’my new button’ });

      In your code above, your property ‘two ‘ has a space in it, so you would actually have to change it to look like this:    

      $.extend(obj.buttons['two '], { ’name’: ’my new button’ });