👋 Say Goodbye to Spread Operator: Use Default Composer

For all the devs using lodash:
merge & mergeWith is doing the similar thing

The problem you propose is less common than the one where the spread operator is enough.

Also, when you need to overwrite values in "huge, heavily nested objects" AND treat some keys differently from others, you make it maintainable by passing the object down several functions.

I would say a pipeline of functions is easy to maintain and most likely easier to read than the setConfig which should theoretically grow in proportion to the size and complexity of your object.

It's a nice project, honestly, but what I dislike is the title. There's no ground for words like "Say Goodbye to Spread Operator".

When the spread op is enough (which is most cases), I have to assume that it will be more performant than a function that applies deep overwriting, and I still need convincing that the example you proposed is the best approach. For instance, why do you assume the need to have a defaults object that holds everything in the original object? The main reason for the complication comes from that IMO.

While everyone has to come with his own science which sometimes is useless, I'll come with a big thank because I see a real benefit in using this library for testing actually. We have a lot of cases where you have this default object and for each test scenario we have to replace a small part of that object for testing purpose.
Thank again !

Another approach for mutating the original object is a library called immer. It's not helpful for setting defaults, but where time come to send this object and you wish normalize/transform values without spreading pain, I'd strongly recommend using immer.

I think it's easy to say just use built-in JavaScript capabilities when posts suggesting a library come up, but I think that knowing there are multiple options available to achieve a desired goal is great. There's a million and one ways to do anything in the dev world; it's all about finding what works best for you or your team. So thanks for exposing me to something I didn't previously know existed.

Say Goodbye to libraries: Use native developer.mozilla.org/en-US/docs/W...

The only issue that I have with default-composer is that if you have an object property that is an array, with a single/multiple values and you merge with another array, the original array values are overwritten.
The same does not happen for new object properties. These are preserved, and added to the resulting object.
This seems to be an inconsistency. I would like to see a config object that allows the behaviour of the way arrays are merged, to be altered?

You could have 4 different modes:

Mode 1:

Overwrite DEFAULT

//original 
const original = {
    prop1: [‘a’,’e’,’f’]
}

//defaults
const defaults = {
    prop1: [‘a’,’b’,’c’]
}

const config = {
    arrayMode: ‘overwrite’
}

const results = defaultComposer(
    defaults, 
    original,
    config
);

//OR

const results = defaultComposer(
    defaults, 
    original
);

//results
{
    prop1: [‘a’,’b’,’c’]
}

Mode 2:

Prepend

//original 
const original = {
    prop1: [‘a’,’e’,’f’]
}

//defaults 
const defaults = {
    prop1: [‘a’,’b’,’c’]
}

const config = {
    arrayMode: ‘prepend’
}

const results = defaultComposer(
    defaults, 
    original,
    config
);

//result 
{
    prop1: [‘a’,’e’,’f’,‘a’,’b’,’c’]
}

Mode 3:

Append

//original 
const original = {
    prop1: [‘a’,’e’,’f’]
}

//defaults
const defaults = {
    prop1: [‘a’,’b’,’c’]
}

const config = {
    arrayMode: ‘append’
}

const results = defaultComposer(
    defaults, 
    original,
    config
);

//result 
{
    prop1: [‘a’,’b’,’c’,‘a’,’e’,’f’]
}

Mode 4:

Index

//original 
const original = {
    prop1: [‘a’,’b’,’c’,’d’,’e’,‘f’,’g’,’h’]
}

//defaults
const defaults = {
    prop1: [‘f’,’g’,’h’]
}

const config = {
    arrayMode: ‘index’
}

const results = defaultComposer(
    defaults, 
    original,
    config
);

//result 
{
    prop1: [‘f’,’g’,’h’,’d’,’e’,‘f’,’g’,’h’]
}

//Duplicates config key

const config = {
    arrayMode: ‘index’,
    arrayDuplicates: false
}

const results = defaultComposer(
    defaults, 
    original,
    config
);

//result 
{
    prop1: [‘f’,’g’,’h’,’d’,’e’]
}

This is a tricky one, thank you for sharing. The code on gitHub seems to be in typescript only, which is a bit verbose. Is there a JS version?

Things are pretty forward if your objects are not nested. Then you can simply use:

original = Object.assign( defaults, original)

For the nested objects, there does indeed not seem to be something out of the box. If you don´t want another import, you could also use this routine:

// Deep nested defaults
function setDef(obj, def) {
  const isVal = (val) => Array.isArray(val) ? true : typeof val !== 'undefined'
  const isObj = (ob) => typeof (ob) === "object" && ob !== null && !Array.isArray(ob)

  for (let [key, val] of Object.entries(def)) {
    if (isObj(val)) {
      if (!(key in obj)) obj[key] = {}  // create if not exists
      obj[key] = setDef(obj[key], def[key]) // recurse -->
    }
    else if (isVal(val)) if (!isVal(obj[key])) obj[key] = val // set, if value exists and is not yet set
  }
  return obj
}

// set defaults
original = setDef(original, defaults)
console.log(original)

Not extensively tested yet, if some cases are not handled properly, please leave a note.

const original = {
  name: "",
  score: null,
  address: {
    street: "",
    city: "",
    state: "",
    zip: "",
  },
  emails: [],
  hobbies: [],
  another: "anotherValue"
};
const defaults = {
  name: "John Doe",
  score: 5,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
    zip: "12345",
  },
  emails: ["john.doe@example.com"],
  hobbies: ["reading", "traveling"],
};
const results = { ...original, ...defaults };
// {"name":"John Doe","score":5,"address":{"street":"123 Main St","city":"Anytown","state":"CA","zip":"12345"},"emails":["john.doe@example.com"],"hobbies":["reading","traveling"],"another":"anotherValue"}

Default spread gives the same result of "default-composer" explained in the above blog. Anyone can test the code by copy passing the code in console and test

As always: "Forget about JavaScript, use yet-another-library".