Map function for objects (instead of arrays)

javascript

object-transformation

javascript-techniques

functional-programming

byAnton Shumikhin·Sep 28, 2024

Use Object.entries with .map() to iterate over object entries, then Object.fromEntries() to construct a new object with transformed values:

// Define a new map function for objects
const objectMap = (obj, fn) => 
  Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, fn(value)]));

// Setup our object, just some random numbers here
const myObject = { a: 1, b: 2, c: 3 };

// Call the objectMap function to double the numbers (because one is never enough, right?)
const doubled = objectMap(myObject, value => value * 2);

// Time to let the magic happen and check the result
console.log(doubled); // { a: 2, b: 4, c: 6 }

This approach leverages modern JavaScript features for an elegant and efficient object transformation.

The roadmap to object transformation in JavaScript

In JavaScript, transforming objects involves a few key principles and techniques, let's navigate through this exciting journey:

Turn your object into an array and back with `Object.entries` and `Object.fromEntries`

There are the twin powers of Object.entries and Object.fromEntries that convert an object into an array and vice versa. It's like turning water into wine and back again (though wouldn't recommend drinking it)!

// (Unexpectedly sober) part one: the transformation to an array
console.log(Object.entries(myObject)); // [ ['a', 1], ['b', 2], ['c', 3] ]

// (Hangover free) part two: the transformation back to an object
console.log(Object.fromEntries([ ['a', 1], ['b', 2], ['c', 3] ])); // { a: 1, b: 2, c: 3 }

Immutable transformation with `reduce`

Combining Object.keys or Object.entries and reduce results in a wonderful new personalized object (sounds like a fancy cocktail, doesn't it?). This method ensures that the original object remains unspoiled - cheers!

// Because everyone loves a fancy cocktail
const immutableMap = (obj, transformFn) =>
  Object.keys(obj).reduce((result, key) => {
    result[key] = transformFn(obj[key]);
    return result;
  }, {});

Meet `objectMap`, your new BFF

In the JavaScript world, the challenges are endless (but so are the solutions). Here, we present the objectMap function. It's not Spiderman, but it's pretty close.

// It was love at first sight
const objectMap = (obj, fn) =>
  Object.keys(obj).reduce((accumulator, key) => ({ ...accumulator, [key]: fn(obj[key]) }), {});

Let's not forget `hasOwnProperty`

Prototype pollution sounds like a really bad thing, doesn't it? Well, it is! Luckily, hasOwnProperty is here to save us when we're foraging with a for...in loop.

For `this` and honor (Context preservation)

Sometimes, this gets lost. It happens to everyone, no shame in it. When that happens, give this a map with ctx and he'll find his way.

// myContext is the map for this (no Gandalf required)
const transformed = objectMap(myObject, function(value) { return this.process(value); }, myContext);

More objects? No problem, go recursive

Nested objects are like Russian dolls. To handle these structures, set your recursion mode ON. Trust me, you'll need it.

Power up your object transformation techniques

Get ready to raise your game by mastering these advanced techniques for object transformation:

In-place mapping with `forEach`

Apply forEach on Object.keys when immutability is less a concern but memory usage is—you're altering values without creating new ones. Sounds like reusable diapers (it may not sound fun, but it's good for Mother Nature).

Portfolio diversification with `Object.assign` and spread syntax

When you are in an Object.fromEntries-restricted environment (sounds scary already), Object.assign or the spread operator can be real life-savers, like those tiny packs of tissues we all forget we have.

Default `Object` upgrades with `Object.defineProperty`

If you need to extend objects in a safe, non-enumerable way, consider using Object.defineProperty. It's like adding a spoiler to your car—it doesn't make it faster, but it looks cool.

Applying functional programming to objects

Being functional is cool in JavaScript world, and that includes objects. Remember, every transformation function you apply is a badge of honor.

// a cool transformation, because transformations are the new black
const result = objectMap(myObject, myCoolTransformation);

Using libraries when the going gets tough

Sometimes, vanilla JavaScript isn't enough and you need to call for reinforcements. Using utility libraries like lodash's mapValues could be your silver bullet in these times of need.