A variant of $.extend that keeps properties with undefined values?

November 22, 2016, at 10:15 AM

I see that this code:

$.extend(true, {}, { data: undefined });

returns an empty object: {}. I tested this with jQuery 2.1.1 on Chrome 45.0.2454.101 (64-bit).

Is there a variant of $.extend that will keep properties with undefined values? Can you give me an example?

Thank you very much! :-)

Answer 1

There is no way to do it using Jquery extend method. It is clearly mentioned in the API documentaion https://api.jquery.com/jquery.extend/

When two or more object arguments are supplied to $.extend(), properties from all of the objects are added to the target object. Arguments that are null or undefined are ignored.

Answer 2

As written in the question's comments, the jQuery documentation mentions that the jQuery implementation ignores the properties with undefined values. In my code I do not want to use another library such as lodash so I took the code from jQuery's $.extend and I changed it a bit to keep properties with undefined values.

 * extend
 * A jQuery $.extend implementation changed to keep properties with
 * undefined values. The original source code was taken from here:
 * https://github.com/jquery/jquery/blob/64f7d10980a5e9f2862f1239a37d95e6c39e37ec/src/core.js
 * and the original documentation was taken from here:
 * http://api.jquery.com/jQuery.extend/
 * Merge the contents of two or more objects together into the first object.
 * @name extend
 * @function
 * @param {Boolean} deep If true, the merge becomes recursive (aka. deep copy).
 * @param {Object} target The object to extend. It will receive the new properties.
 * @param {Object} object1 An object containing additional properties to merge in.
 * @param {Object} objectN Additional objects containing properties to merge in.
 * @return {Object} The modified target object.
function extend() {
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[0] || {},
        i = 1,
        length = arguments.length,
        deep = false;
    // Handle a deep copy situation
    if (typeof target === "boolean") {
        deep = target;
        // Skip the boolean and the target
        target = arguments[i] || {};
    // Handle case when target is a string or something (possible in deep copy)
    if (typeof target !== "object" && !$.isFunction(target)) {
        target = {};
    // Extend jQuery itself if only one argument is passed
    if (i === length) {
        target = this;
    for (; i < length; i++) {
        // Only deal with non-null/undefined values
        if ((options = arguments[i]) != null) {
            // Extend the base object
            for (name in options) {
                src = target[name];
                copy = options[name];
                // Prevent never-ending loop
                if (target === copy) {
                // Recurse if we're merging plain objects or arrays
                if (deep && copy && ($.isPlainObject(copy) || (copyIsArray = $.isArray(copy)))) {
                    if (copyIsArray) {
                        copyIsArray = false;
                        clone = src && $.isArray(src) ? src : [];
                    } else {
                        clone = src && $.isPlainObject(src) ? src : {};
                    // Never move original objects, clone them
                    target[name] = jQuery.extend(deep, clone, copy);
                // Modified this else branch to allow undefined values
                } else {
                    target[name] = copy;
    // Return the modified object
    return target;
Rent Charter Buses Company
Binding touch events to just those elements with a class &amp; not its children

Binding touch events to just those elements with a class & not its children

I'm trying to convert hovers to touches for all menu list items that have a class of. menu-item-has-children ONLY not its children (unless they too have the class.

Inline if else statement to toggleClass with jQuery?

Inline if else statement to toggleClass with jQuery?

I have an inline if / else statement which adds and removes a class:.

Go to an offset anchor tag on another page

Go to an offset anchor tag on another page

I have a website where the header becomes fixed in position as the user scrolls down the page - standard stuff. .