javascript creating a module to extend a nested object

Question

javascript creating a module to extend a nested object

Currently, I am working on a JavaScript module that includes an object of default options. Here is a snippet of the code:

 var myModule = function() {

  // Define option defaults
  var defaults = {
    foo: 'bar',
    fooObject: {
      option1: [],
      option2:true,
      option3: false,
    }
  }

  // Update options by merging defaults with the provided arguments
  if (arguments[0] && typeof arguments[0] === "object") {
    this.options = mergeDefaults(defaults, arguments[0]);
  }
}

When calling my module like this:

var moduleInstance = new myModule({
  foo: 'some value',
  fooObject: {
    option1: [1, 2, 3]        
  }
});

moduleInstance.options.foo; //will return an array [1, 2, 3]

However,

moduleInstance.options.fooObject; //will only contain option1

I understand why that happens since option2 and option3 are not defined initially. I am struggling to find a solution for this without relying on jQuery or other frameworks.

Edit: Potential Solution

I managed to address this issue in the following way: http://jsfiddle.net/optionsit/sgmme5dy/

In the loop where I check for hasOwnProperty...

I added this if statement:

if(typeof properties[property] === 'object'  && typeof  properties[property].nodeType === 'undefined' )

This allows me to differentiate between objects and DOM elements (as some top-level values are DOM elements) and iterate through their children to replace them if they are set in the arguments.

While it may not be the most elegant solution, it serves my needs. Feel free to suggest a better approach. I appreciate your input.

Thank you for your assistance

javascript object module

Answer 1

Answer №1

To achieve the desired result, it is important to implement a recursive call for your extendDefaults method:

function extendDefaults(source, properties) {
    var property;

    for (property in properties) {
        if (properties.hasOwnProperty(property)) {
            if (typeof properties[property] === 'object' && typeof properties[property].nodeType === 'undefined') {
                extendDefaults(source[property], properties[property]);
            } else {
                source[property] = properties[property];        
            }
        }
    }

    return source;
}

You can find an updated fiddle demonstrating this aspect here: http://jsfiddle.net/sgmme5dy/3/

It is crucial to note that this function may encounter issues with null values and Date properties due to their types being classified as objects. To address this concern, simply include the following condition within the if statement:

if (typeof properties[property] === 'object' && properties[property] !== null && !(properties[property] instanceof Date) && typeof properties[property].nodeType === 'undefined')

Additionally, do keep in mind that Arrays are also considered of type object. In light of these complexities, it might be more efficient to utilize existing extend functions available. For instance, jQuery offers $.extend, while lodash/underscorejs provides _.assign. Alternatively, there are standalone libraries such as node-deep-extend for those not utilizing the aforementioned libraries.

Answer 2

To achieve the desired result, it is important to implement a recursive call for your extendDefaults method:

function extendDefaults(source, properties) {
    var property;

    for (property in properties) {
        if (properties.hasOwnProperty(property)) {
            if (typeof properties[property] === 'object' && typeof properties[property].nodeType === 'undefined') {
                extendDefaults(source[property], properties[property]);
            } else {
                source[property] = properties[property];        
            }
        }
    }

    return source;
}

You can find an updated fiddle demonstrating this aspect here: http://jsfiddle.net/sgmme5dy/3/

It is crucial to note that this function may encounter issues with null values and Date properties due to their types being classified as objects. To address this concern, simply include the following condition within the if statement:

if (typeof properties[property] === 'object' && properties[property] !== null && !(properties[property] instanceof Date) && typeof properties[property].nodeType === 'undefined')

Additionally, do keep in mind that Arrays are also considered of type object. In light of these complexities, it might be more efficient to utilize existing extend functions available. For instance, jQuery offers $.extend, while lodash/underscorejs provides _.assign. Alternatively, there are standalone libraries such as node-deep-extend for those not utilizing the aforementioned libraries.

Answer 3

Answer №2

It appears that your code is overwriting the entire fooObject, which may not be desired. Depending on what you're trying to achieve, there are various solutions available. One approach could be to implement an additional method for appending new elements to the existing fooObject instead of replacing it entirely within the "constructor" function.

 function extendDefaults(source, properties) {
   var property;
   for (property in properties) {
       if (properties.hasOwnProperty(property)) {
           source[property] = properties[property];
       }
   }
   return source;
 }


var myModule = function () {

   // Setting default options
   var defaults = {
       foo: 'bar',
       fooObject: {
           option1: [],
           option2: true,
           option3: false,
       }
   }

   this.options = extendDefaults({}, defaults);

   // Extending defaults with provided arguments
   if (arguments[0] && typeof arguments[0] === "object") {
       this.options = extendDefaults(this.options, arguments[0]);
   }
}

var moduleInstance = new myModule({
   foo: 'some value',
});

moduleInstance.options.fooObject.option1 = [1, 2, 3];


console.log(moduleInstance.options.fooObject);

console.log(moduleInstance.options.foo);

Link to Example

Answer 4

It appears that your code is overwriting the entire fooObject, which may not be desired. Depending on what you're trying to achieve, there are various solutions available. One approach could be to implement an additional method for appending new elements to the existing fooObject instead of replacing it entirely within the "constructor" function.

 function extendDefaults(source, properties) {
   var property;
   for (property in properties) {
       if (properties.hasOwnProperty(property)) {
           source[property] = properties[property];
       }
   }
   return source;
 }


var myModule = function () {

   // Setting default options
   var defaults = {
       foo: 'bar',
       fooObject: {
           option1: [],
           option2: true,
           option3: false,
       }
   }

   this.options = extendDefaults({}, defaults);

   // Extending defaults with provided arguments
   if (arguments[0] && typeof arguments[0] === "object") {
       this.options = extendDefaults(this.options, arguments[0]);
   }
}

var moduleInstance = new myModule({
   foo: 'some value',
});

moduleInstance.options.fooObject.option1 = [1, 2, 3];


console.log(moduleInstance.options.fooObject);

console.log(moduleInstance.options.foo);

Link to Example

javascript creating a module to extend a nested object

Answer №1

Answer №2

Similar questions

Issue with Jquery Drag and Drop functionality, navigate to a different page

The absence of the function crypto.createPrivateKey is causing issues in a next.js application

Managing errors in React Router on the server-side

Traversing an array of objects in TypeScript and appending to a separate array if not already present

Utilizing jquery.validate.min.js for efficient form validation

How can an additional value be sent to the form validation method?

Struggling with jQuery and the "hash" functionality?

Displaying JSON data based on a specific key

Ensuring correct association of values to avoid redundancies

Receiving a blank request payload despite implementing a body parsing middleware

Ways to Retrieve JavaScript Variable inside HTML Tags in a JSP

Characteristics of events within the embed element

What could be causing my React child component to not update when changes are made to an array passed down in props after fetching new data?

Is it possible to easily extract all values associated with a particular key in a nested JSON using JavaScript?

Unable to click on link with JavaScript using Selenium webdriver

Can user-generated code execute Javascript Promises in its entirety?

Updating File Owner with Google Drive API - Permission Error 400 "Field 'Permission Type' is mandatory"

Attempting to conceal the API, however, the backend is throwing an error

How to Add Functionality to Angular Apps Without Defining a Route

Check for pattern using JavaScript regular expression