How can we modify specific values of an object using Lodash and return the updated object?

Question

How can we modify specific values of an object using Lodash and return the updated object?

const fruits = {
    apple: 2,
    orange: 3,
    grape: 4,
    banana: 5
}

My aim is to adjust the values of certain fruits while being able to reference their current values.

For example:

const premiumFrutis = _.doSomething(fruits, apple + 2, banana + 3)

// premiumFrutis = {
//     apple: 4,
//     orange: 3,
//     grape: 4,
//     banana: 8
// }

javascript lodash

Answer 1

Answer №1

One way to achieve this is by using _.assignWith or _.assignInWith. The notable distinction lies in the fact that while assignIn traverses the prototype chain, with plain objects, both functions yield the same result.

In either scenario, a customizer function can be supplied to determine how object values are merged. For example:

const combineValues = (srcValue, objValue) => 
      srcValue + objValue;

This simple implementation sums up values for corresponding keys:

const fruits = {
    apple: 2,
    orange: 3,
    grape: 4,
    banana: 5
}

const combineValues = (srcValue, objValue) => 
  srcValue + objValue;

const modification = {apple: 2, banana: 3};

const premiumFrutis = _.assignWith(fruits, modification, combineValues);
console.log(premiumFrutis);
// {
//     apple: 4,
//     orange: 3,
//     grape: 4,
//     banana: 8
// }

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e8ebe0e5f7ecc4b0aab5b3aab6b5">[email protected]</a>/lodash.min.js"></script>

Nevertheless, implementing such a custom function may not even be necessary since Lodash already offers _.add, ready to be employed directly:

const fruits = {
    apple: 2,
    orange: 3,
    grape: 4,
    banana: 5
}

const modification = {apple: 2, banana: 3};

const premiumFrutis = _.assignWith(fruits, modification, _.add);
console.log(premiumFrutis);
// {
//     apple: 4,
//     orange: 3,
//     grape: 4,
//     banana: 8
// }

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff93909b9e8c97bfcbd1cec8d1cdce">[email protected]</a>/lodash.min.js"></script>

The capability extends to subtraction if negative values are provided:

const fruits = {
    apple: 2,
    orange: 3,
    grape: 4,
    banana: 5
}

const modification = {apple: 2, banana: -1};

const premiumFrutis = _.assignWith(fruits, modification, _.add);
console.log(premiumFrutis);
// {
//     apple: 4,
//     orange: 3,
//     grape: 4,
//     banana: 4
// }

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="600c0f0401130820544e51574e5251">[email protected]</a>/lodash.min.js"></script>

An issue may arise when more modifications are provided than there are keys in the original objects:

const fruits = {
    apple: 2,
    orange: 3,
    grape: 4,
    banana: 5
}

const modification = {apple: 2, banana: 3, lemon: 42};

const premiumFrutis = _.assignWith(fruits, modification, _.add);
console.log(premiumFrutis);
// {
//     apple: 4,
//     orange: 3,
//     grape: 4,
//     banana: 8,
//     lemon: 42
// }

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55393a3134263d15617b64627b6764">[email protected]</a>/lodash.min.js"></script>

If no new items need to be added, _.pickBy could be utilized to eliminate any modifications not present in the initial object:

const fruits = {
    apple: 2,
    orange: 3,
    grape: 4,
    banana: 5
}

const modification = {apple: 2, banana: 3, lemon: 42};
const onlyExisting = _.pickBy(modification, (value, key) => key in fruits);

const premiumFrutis = _.assignWith(fruits, onlyExisting, _.add);
console.log(premiumFrutis);
// {
//     apple: 4,
//     orange: 3,
//     grape: 4,
//     banana: 8
// }

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2cecdc6c3d1cae2968c93958c9093">[email protected]</a>/lodash.min.js"></script>

Answer 2

One way to achieve this is by using _.assignWith or _.assignInWith. The notable distinction lies in the fact that while assignIn traverses the prototype chain, with plain objects, both functions yield the same result.

In either scenario, a customizer function can be supplied to determine how object values are merged. For example:

const combineValues = (srcValue, objValue) => 
      srcValue + objValue;

This simple implementation sums up values for corresponding keys:

const fruits = {
    apple: 2,
    orange: 3,
    grape: 4,
    banana: 5
}

const combineValues = (srcValue, objValue) => 
  srcValue + objValue;

const modification = {apple: 2, banana: 3};

const premiumFrutis = _.assignWith(fruits, modification, combineValues);
console.log(premiumFrutis);
// {
//     apple: 4,
//     orange: 3,
//     grape: 4,
//     banana: 8
// }

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e8ebe0e5f7ecc4b0aab5b3aab6b5">[email protected]</a>/lodash.min.js"></script>

Nevertheless, implementing such a custom function may not even be necessary since Lodash already offers _.add, ready to be employed directly:

const fruits = {
    apple: 2,
    orange: 3,
    grape: 4,
    banana: 5
}

const modification = {apple: 2, banana: 3};

const premiumFrutis = _.assignWith(fruits, modification, _.add);
console.log(premiumFrutis);
// {
//     apple: 4,
//     orange: 3,
//     grape: 4,
//     banana: 8
// }

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff93909b9e8c97bfcbd1cec8d1cdce">[email protected]</a>/lodash.min.js"></script>

The capability extends to subtraction if negative values are provided:

const fruits = {
    apple: 2,
    orange: 3,
    grape: 4,
    banana: 5
}

const modification = {apple: 2, banana: -1};

const premiumFrutis = _.assignWith(fruits, modification, _.add);
console.log(premiumFrutis);
// {
//     apple: 4,
//     orange: 3,
//     grape: 4,
//     banana: 4
// }

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="600c0f0401130820544e51574e5251">[email protected]</a>/lodash.min.js"></script>

An issue may arise when more modifications are provided than there are keys in the original objects:

const fruits = {
    apple: 2,
    orange: 3,
    grape: 4,
    banana: 5
}

const modification = {apple: 2, banana: 3, lemon: 42};

const premiumFrutis = _.assignWith(fruits, modification, _.add);
console.log(premiumFrutis);
// {
//     apple: 4,
//     orange: 3,
//     grape: 4,
//     banana: 8,
//     lemon: 42
// }

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55393a3134263d15617b64627b6764">[email protected]</a>/lodash.min.js"></script>

If no new items need to be added, _.pickBy could be utilized to eliminate any modifications not present in the initial object:

const fruits = {
    apple: 2,
    orange: 3,
    grape: 4,
    banana: 5
}

const modification = {apple: 2, banana: 3, lemon: 42};
const onlyExisting = _.pickBy(modification, (value, key) => key in fruits);

const premiumFrutis = _.assignWith(fruits, onlyExisting, _.add);
console.log(premiumFrutis);
// {
//     apple: 4,
//     orange: 3,
//     grape: 4,
//     banana: 8
// }

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2cecdc6c3d1cae2968c93958c9093">[email protected]</a>/lodash.min.js"></script>

Answer 3

Answer №2

To achieve this, you can develop a mixin function. Start by duplicating the original object and then apply the changes from the update object on top of it.

_.mixin({
  /**
   * Assign incremental values to a source object for a given update object.
   * @param {object} source
   * @param {object} update
   * @return {object} updated (cloned) source object
   */
  doSomething: function(source, update) {
    return _.reduce(update, function(result, value, key) {
      return _.assign(result, { [key]: source[key] + value });
    }, _.clone(source));
  }
});

const fruits = {
  apple: 2,
  orange: 3,
  grape: 4,
  banana: 5
};

const premiumFruits = _.doSomething(fruits, {
  apple:  2, // increment apple by 2
  banana: 3  // increment banana by 3
});

console.log(premiumFruits);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

Output

  "apple": 4,
  "orange": 3,
  "grape": 4,
  "banana": 8
}

ES6 Version without Lodash

const doSomething = (source, update) =>
  Object
    .entries(update)
    .reduce((result, [key, value]) =>
      ({ ...result, [key]: source[key] + value }),
      { ...source })

const fruits = {
  apple: 2,
  orange: 3,
  grape: 4,
  banana: 5,
}

const premiumFruits = doSomething(fruits, {
  apple:  2, // increment apple by 2
  banana: 3, // increment banana by 3
})

console.log(premiumFruits)

Update

Here is VLAZ's final example, but as a Lodash mixin:

Note: I replaced the key in fruits call with _.has(fruits, key) to make it more portable.

_.mixin({
  doSomething: function(source, update) {
    return _.assignWith(
      source,
      _.pickBy(update, (v, k) => _.has(source, k)),
      _.add
    );
  } 
});

const fruits = {
  apple: 2,
  orange: 3,
  grape: 4,
  banana: 5
};

const premiumFruits = _.doSomething(fruits, {
  apple:  2, // Increment apple by 2
  banana: 3, // Increment banana by 3
  lemon: 42  // Do nothing, does not exist!
});

console.log(premiumFruits);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

Answer 4

To achieve this, you can develop a mixin function. Start by duplicating the original object and then apply the changes from the update object on top of it.

_.mixin({
  /**
   * Assign incremental values to a source object for a given update object.
   * @param {object} source
   * @param {object} update
   * @return {object} updated (cloned) source object
   */
  doSomething: function(source, update) {
    return _.reduce(update, function(result, value, key) {
      return _.assign(result, { [key]: source[key] + value });
    }, _.clone(source));
  }
});

const fruits = {
  apple: 2,
  orange: 3,
  grape: 4,
  banana: 5
};

const premiumFruits = _.doSomething(fruits, {
  apple:  2, // increment apple by 2
  banana: 3  // increment banana by 3
});

console.log(premiumFruits);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

Output

  "apple": 4,
  "orange": 3,
  "grape": 4,
  "banana": 8
}

ES6 Version without Lodash

const doSomething = (source, update) =>
  Object
    .entries(update)
    .reduce((result, [key, value]) =>
      ({ ...result, [key]: source[key] + value }),
      { ...source })

const fruits = {
  apple: 2,
  orange: 3,
  grape: 4,
  banana: 5,
}

const premiumFruits = doSomething(fruits, {
  apple:  2, // increment apple by 2
  banana: 3, // increment banana by 3
})

console.log(premiumFruits)

Update

Here is VLAZ's final example, but as a Lodash mixin:

Note: I replaced the key in fruits call with _.has(fruits, key) to make it more portable.

_.mixin({
  doSomething: function(source, update) {
    return _.assignWith(
      source,
      _.pickBy(update, (v, k) => _.has(source, k)),
      _.add
    );
  } 
});

const fruits = {
  apple: 2,
  orange: 3,
  grape: 4,
  banana: 5
};

const premiumFruits = _.doSomething(fruits, {
  apple:  2, // Increment apple by 2
  banana: 3, // Increment banana by 3
  lemon: 42  // Do nothing, does not exist!
});

console.log(premiumFruits);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

How can we modify specific values of an object using Lodash and return the updated object?

Answer №1

Answer №2

Output

ES6 Version without Lodash

Update

Similar questions

Is there a way to dynamically update the polyline on the map when I drag a marker to change the path, removing the previous one in the process?

Partially extended texture in Three.js

Eradicating Pinpointers on Navigation Tool (Google Maps)

Routing static pages in Angular 2

The ReactJS component is unable to resolve the specified domain name

Extracting a floating picture from an Excel spreadsheet using ReactJS

Adjusting SVG size based on the position of the cursor for transforming origin

When using AutoComplete in MUI, I encountered an issue while attempting to assign a default value to the checkbox from an API. Instead of achieving the desired result, I received an error stating "(inter

Exploring Mixed Type Arrays Initialization in Typescript using Class-Transformer Library

What is the best way to eliminate HTML <li> bullets using codebehind?

Exploring different pages in an Ionic and AngularJS mobile application

JavaScript: The power of nested array manipulation

Is there a way for me to retrieve the name and extension of an attached file in an input field of type "text"?

Ways to allocate space evenly between components of the same size in React Native

Is there a way to append the current path to a link that leads to another URL?

Struggling to pass Chai tests with Node and Express.js when trying to handle POST requests

Is today within the current week? Utilizing Moment JS for time tracking

Guide to adding sound effects to your Vue 3 app using the Composition API

Is there a similar effect in jQuery? This is achieved using prototype

Determine the character's position in an input field by tracking mouse movements