Map chaining vs execute on first map

Question

I have two large arrays of objects, which look something like:

[
  { key: "prop", Email: "[email protected]" },
  //...
]

and

[
  { key: "prop", "AN EMAIL": "SomeEmail@emailcom" },
  //...
]

To compare the array of objects by email, I first map the arrays to only grab the emails, then I format the emails as follows:

const formatEmail = email => String(email).toLowerCase().replace(/\W/g, "");
const emails1 = objects1.map(o => formatEmail(o.Email));
const emails2 = objects2.map(o => formatEmail(o["AN EMAIL"]));
//... comparison code follows

However I was thinking of instead doing this as follows:

const formatEmail = email => String(email).toLowerCase().replace(/\W/g, "");
const emails1 = objects1.map(o => o.Email).map(formatEmail);
const emails2 = objects2.map(o => o["AN EMAIL"]).map(formatEmail);
//... comparison code follows

I feel the second way is more readable, and there is not a significant performance difference in my use case. I would love feedback on this small exert from my project, and a reasoning of which way is better. Any feedback is appreciated. I did use generic naming for this example.

For context of the use case for this code, the main reason I am writing this script is that we have lots of data that only partially matches in each system. This is usually due to human error on repeating data entry. I can run reports on each system and turn the data into objects to compare in javascript, and am building some logic that will attempt to draw a connection between the two objects based on their emails.

Answer 1

I also prefer the second example, due to the functional programming style. I believe it's easier to read because you've decoupled the getter from the transformation.

The only change I'm tempted with is to pull out and share the getter logic with some currying. Something like this:

const emailGetter = key => o => o[key];

const emails1 = objects1.map(emailGetter('Email')).map(formatEmail);
const emails2 = objects2.map(emailGetter('AN EMAIL')).map(formatEmail);

If however, you have a preference for the point free function approach, like you did for map(formatEmail), then this may be more fitting:

const emailGetter = key => o => o[key];
const o1Getter = emailGetter('Email');
const o2Getter = emailGetter('AN EMAIL');

const emails1 = objects1.map(o1Getter).map(formatEmail);
const emails2 = objects2.map(o2Getter).map(formatEmail);

The compromise being a higher setup fee for a cleaner call site.