DEV Community

👋 Say Goodbye to Spread Operator: Use Default Composer

Aral Roca on June 05, 2023

Original article: https://aralroca.com/blog/default-composer When working with objects in JavaScript, it is common to need to set default values f...

Read full post

René Kaesler • Jun 6 '23 • Edited

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

Lars Rye Jeppesen • Jun 6 '23

No dev should be using lodash

insidewhy • Jun 6 '23

What's the reason? With lodash-es and a tree-shaking bundler I only pay for what I'm using, so I don't see the harm in importing a few functions from lodash if I need them.

Mateus Amorim • Jun 8 '23 • Edited

lodash has bad types in general, destroying typesafety and can be easily overused, creating very ugly code that is hard to understand unless you are really familiar with it. Many of the things it does can easily be done with native javascript too.

ofc, you can still use it for some things, and you can wrap it with functions with better typings, but in general it is good to avoid using it at all when working on teams since others might overuse it or use it in an unsafe manner.

something that is commonly oversued is the lodash "get" method, ex:

_.get(a, "b.c", [])

this has many issues:
1 - the second parameter is not typed, so we don't know what we can access or if it exists or not
2 - the third parameter is not restricted to the type of a.b.c
3 - the resulting type is "any", making it easy to do typeErrors.

Nowdays we have better alternatives in general, for example:

a?.b?.c ?? []

this will solve all of the issues mentioned before and doesn't rely on a library for it :D

Adrien Denat • Jun 9 '23

And there is Remeda!

insidewhy • Jun 9 '23 • Edited

I agree with that, there's bad stuff in lodash for sure (I never use get so it's good you point out the problems with it), but there's okay stuff too.

Mike Thai • Jun 6 '23

Why not? I think lodash is totally fine if you use it efficiently and understand what it does.

But if you're one of those devs who imports the entire library into every project to only use like 2% of it and don't know how any of it works/are completely helpless at your job without it, then yeah I agree - you're just shooting yourself in the foot.

Lars Rye Jeppesen • Jun 6 '23

Because lodash is not maintained as a project any longer afaik

twiddler • Jun 7 '23

github.com/lodash/lodash/issues/5605

aneesshameed • Jun 7 '23

Lodash is a matured library. Because its not updated, that doesn't means that it cannot be used on projects. Lodash works and it helps to write clean code.

Christian Baldwin • Jun 8 '23

Our definitions of clean code are obviously different.

My definition of clean code is thoughtful composition of logic and data in order to avoid needing to depend on 3rd party libraries to help you maintain it.

René Kaesler • Jun 6 '23 • Edited

Hehe, okay okay!

I had not planned to trigger a framework debate. I'm sure your preferred FP-utility framework is capable of the merging concept, too. No matter if it's ramda, underscore or whatever else exists.

Denny Christochowitz • Jun 8 '23

🤣

Aral Roca • Jun 6 '23

Thank you for sharing @renekaesler. At first we got the same functionality with mergeWith:

github.com/aralroca/default-compos...

In the end we opted for our own implementation to avoid 10kb, even though we were importing only mergeWith and not all lodash we thought it was too much for this feature.

This is the current implementation:

github.com/aralroca/default-compos...

René Kaesler • Jun 6 '23 • Edited

Thanks for sharing your lib to the community, @aralroca !

Got your point! But 10kb for a single method import sounds strange. Just being curious: Have you used the lodash-es package?

All in all it's not about lodash. It's just about the hint: Widely used utility frameworks may already have this functionally available 😊

Phylis Jepchumba, MSc • Jun 6 '23

Welcome to the community, René Kaesler! We're thrilled to have you here. It's always exciting to see new members join, bringing fresh perspectives and ideas. Feel free to explore the various discussions, ask questions, and share your knowledge with others. Don't hesitate to reach out if you need any assistance or have any specific interests within the community. We're here to support each other and learn together. Once again, a warm welcome to you, and we look forward to connecting with you further. Happy participating!

aneesshameed • Jun 7 '23

merge and mergeWith is not doing what this post is about. Completely different

René Kaesler • Jun 8 '23 • Edited

I should have given an example. Normally I am using the following pattern, for default nested options:

const options = {
  b: 2,
  c: 3,
  nested: {
    e: 5,
    f: 6,
  },
};

const defaultOptions = {
  a: 1,
  b: "two",
  nested: {
    d: 4,
    e: "five",
  },
};

// this mutates `defaultOptions`:
const composedOptions = _.merge(defaultOptions, options);

// this preserves `defaultOptions`:
// const composedOptions = _.merge({}, defaultOptions, options);

console.log(composedOptions);
// => { a: 1, b: 2, c: 3, nested: { d: 4, e: 5, f: 6 }}

If you want to tweak the behaviour of value replacement differently for some values, you can use mergeWith. It's quite similar what the library is accomblishing.

Thai Pangsakulyanont • Jun 8 '23

Did you mean defaultsDeep?

npmjs.com/package/lodash.defaultsdeep

René Kaesler • Jun 8 '23

No, I really meant to use merge (see my comment before).

But your hint is semantically even better! 🥳
Didn't know about defaultsDeep

Jeric Bas • Jun 13 '23 • Edited

Nah! Avoid lodash merge and mergeWith.

Maximilian Lenhardt • Jun 24 '23

At least I encountered memory leaks using lodash methods and it's not maintained since 2018 or so.

Ghaleb • Jun 6 '23 • Edited

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.

Aral Roca • Jun 6 '23

You are right, the title may be confusing, the spread operator is great and should not always be replaced by defaultComposer, just in case you need to mix defaults in a nested way.

Could you show an example of the pipelines you propose? I'm curious and if we can make the setConfig more user friendly it will be very welcome. Thanks 😊

Imad El Hitti • Jun 8 '23

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 !

Rich Tillman • Jul 17 '23

Great point, would be a time saver for sure.

shArky • Jun 9 '23

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.

Rita Bradley • Jun 9 '23

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.

Uladzislau Tsyrkunou • Jun 6 '23

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

Aral Roca • Jun 6 '23

Structured clone is a deep clone, but not for the defaults

Charles Robertson • Jun 7 '23 • Edited

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’]
}

Aral Roca • Jun 7 '23

thanks for your comment. This is happening because is not a fully merge, is detecting defaultables to replace it, and is replacing to the defaults only if the value is undefined, null, empty string, empty array, empty object. However as you comment we can add this feature configurable, is a good idea. I'm going to create the issue to reminder this. Thanks for your contribution

Charles Robertson • Jun 7 '23

Anyway, great little library. Thanks 🙏

Eckehard • Aug 2 '23 • Edited

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.

Vijay Deepak • Aug 9 '23 • Edited

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

Jorge Fuentes • Jun 7 '23

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

EricMoIr • Jun 7 '23

If you have such complex objects that need to be created multiple times and modified (otherwise default values don't make sense) you probably should be using classes instead of spread anyway

Alisher-Usmonov • Jun 9 '23

defu does this better

Wiktor Wandachowicz • Jun 14 '23

Wow, didn't know about defu. The github documentation looks simple and library can also be customized. Thanks a lot!

Eric Swanson • Jun 6 '23

What are the performance implications of these choices?

Aral Roca • Jun 6 '23

It has complexity O(|S1 ∪ S2|). It traverses through all keys of both objects without duplicates. If we have { a: 1, b: 2} and {b: 8, c: 9} we go through the keys "a", "b" and "c".

JoelBonetR 🥇 • Jun 7 '23

Isn't makestruct way easier to use while accomplishing the same goal?

Cheers!

josh_CA • Jun 9 '23

Looks like immer but native of js, nice!!

Satel • Jun 8 '23

All good point! But installing 3rd party to manage this deserve at some case but not some other cases. So only smart using would be the solution, not saying Good Bye :)

Mehdi mahmud • Jun 10 '23 • Edited

How about StructuredClone in javascript?

Elliot Brenya sarfo • Jun 10 '23

Structuralclone?

Mehdi mahmud • Jun 10 '23

Sorry structuredClone in javascript!

fruntend • Jun 12 '23

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Tomas Cordero • Jun 15 '23

Oh good more tech debt so I can have more things yelling at me when this package eventually gets abandoned! The spread operator works just fine and is native.

Erick Rodriguez • Jun 6 '23

What is the difference with lodash.copydeep? It does deep copies of objects as well?

Aral Roca • Jun 6 '23

cloneDeep of lodash is like structuredClone, is returning an exact copy of the object but with a different reference in memory.

With defaultComposer you can merge different objects with priority, taking the other ones as default values when the data is not comming.

// cloneDeep
const clonedObject = _.cloneDeep(object) // Exact copy of the object but with a different reference in memory

const mixOfObjects = defaultComposer(objectPriorityN, objectPriority2, objectPriority1)

Mike Talbot ⭐ • Jun 6 '23 • Edited

And also your library supports overwriting empty values (e.g. "") as well as undefined, doing that with any kind of merge would probably end up with empty values left in the output.

Hank Wang • Jun 30 '23

looks like another shit