Extending jQuery Plugin default options with user's

Question

In the following demo: what is happening in this line of code?

settings = $.extend({}, defaultSettings, settings || {});

What is the difference between the above and this one:

    if(settings){
    settings = $.extend(defaultSettings, settings);
}

==================================

(function($){
    var defaultSettings = {
        mode            : 'Pencil',
        lineWidthMin    : '0',
        lineWidthMax    : '10',
        lineWidth       : '2'
    };

    $.fn.wPaint = function(settings)
    {
        settings = $.extend({}, defaultSettings, settings || {});

        return this.each(function()
        {
            var elem = $(this);

            //run some code here
        });
    }
})(jQuery);

what does this construct mean? settings || {} = whatever is supplied to the plugin or if nothing was supplied? — Athapali
– Athapali, Commented Mar 7, 2014 at 22:17
It's basically to check if the user passed anything in to the function. If they didn't, an empty object is used to be merged. That line's not actually necessary, because a null/undefined third parameter isn't treated differently than {}. — Ian
– Ian, Commented Mar 7, 2014 at 22:21
And to answer you question about how it's different than if(settings){ - if you don't guarantee settings is an object and has been extended with defaultSettings, you can't use it properly after that. — Ian
– Ian, Commented Mar 7, 2014 at 22:23

T Nguyen · Accepted Answer · 2014-03-07 22:17:13Z

2

settings = $.extend({}, defaultSettings, settings || {});

The jQuery $.extend() method copies properties from one or more objects into each other, from right to left. In this specific example, the method is being passed three objects: {} (empty object), defaultSettings and then settings (or an empty object if settings doesn't exist). So, going from right to left, all properties of settings will be copied into defaultSettings and then the result of that will be copied into the empty object ({}). The upshot of all this is that properties in settings (which are the user's custom options) will take precedence over defaultSettings and then they are all copied into an empty object. The reason for the empty object is because $.extend() actually modifies the first argument by reference, so passing in an empty object as the first object essentially makes a clone without modifying any object.

if(settings){
    settings = $.extend(defaultSettings, settings);
}

This does the same thing except, instead of replacing settings with an empty object if it doesn't exist, it simply doesn't execute the given code.

UPDATE: Regarding settings || {}, this means use the settings object if it exists (technically, if it is truthy) OR use an empty object. It avoid passing a value of undefined.

answered Mar 7, 2014 at 22:17

T Nguyen

3,4253 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ian Over a year ago

In regards to your UPDATE - passing a value of undefined doesn't change anything about the merged/final object, so that settings || {} is unnecessary

T Nguyen Over a year ago

@Ian: You're correct but I'm not here to judge the efficiency of the code presented. As per the question asked, I'm just explaining to the OP what each piece of code means/is doing, regardless of the wisdom of it.

Ian Over a year ago

Oh I know, I wasn't arguing, I was just adding. I just wanted to clarify that part, which you're absolutely right about. I think your whole explanation is great!

Athapali Over a year ago

@TNguyen Thank you much, indeed! My mind knew the construct was doing something along the same line, but you explained it very beautifully! I am sure it will help beginners like me understand special constructs!

Collectives™ on Stack Overflow

Extending jQuery Plugin default options with user's

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related