obj[key] === value : obj[key].
toLowerCase() === value.
toLowerCase(); }}propEquals is generic enough to look up any key / value pair against any object.
For example if we want to know if the first object in the hotels array is Wakanda, we could call it like this:const IsWakanda = propEquals(‘country’, ‘Wakanda’)(hotels[0]);console.
log(IsWakanda); // will output trueNow let’s add a more specific function that will only target the US countries.
Using the outer function of propEquals, we can “fix” the arguments values to always default to the US.
Let’s name this new functionality isUSCountry.
const isUSCountry = propEquals.
call(null, ‘country’, ‘USA’, true);In plain English, we could say that isUSCountry derives from propEquals and set the default values of the parent function to:country as key,USA as value,and want to select either lower or uppercase values of the string USA.
In “simpler” technical terms, isUSCountry is a composition of propEquals.
Putting it to use will give us a very nice and intuitive syntax:const USHotels = hotels.
filter(isUSCountry);console.
table(USHotels);JavaScript using tacit syntax or Point-free compositionThis syntax where USHotels construct is not explicitly specifying any arguments and just the function reference, is called tacit programming or point free compositionThe more helpers the merrierNow that we are done with the filter part, let’s attack the transform part or map with the same approach.
First let’s extract the phone formatting functionality an decouple it from the fact that it is always tied to an object.
We should be able to format a number whether it is part of an object or not.
So below we now have our USPhoneFormat function:function UPhoneFormat(tel) { let area, prefix, line; area = tel.
substr(0, 3); prefix = tel.
substr(3, 3); line = tel.
substr(6, 4); const formatted = `(${area}) ${prefix} ${line}`; return formatted;}Now let’s add our final helper transformProp.
It will basically take a key and a transform function and apply the value transformation on a given object.
function transformProp(key, fn) { return function(obj) { return {…obj, [key]: fn.
call(null, obj[key]) }; }}Now following the same logic we did with isUSCountry, we can “compose” a more specific functionality that only handles phone number formattingconst formatPhone = transformProp.
call(null, ‘phone’, UPhoneFormat);The big payoffNow that we have all of our “tools” in place, we can finally revise our original syntax to just this “above the fold”:const USHotels = hotels.
filter(isUSCountry).
map(formatPhone);//add all the functions below the fold or better yet use imports Logging USHotels to the console will output the following:[ { “name”: “The Golden Thread”, “country”: “USA”, “address”: “5 Maple Street, Los Angeles, CA, 90000”, “phone”: “(212) 555 2345” }, { “name”: “Petit Paris”, “country”: “usa”, “address”: “3669 Elm Street, New York, 30000”, “phone”: “(707) 555 9087” }, { “name”: “The Empress Lounge”, “country”: “USA”, “address”: “1 Kings Place, Atlanta, GA, 30000”, “phone”: “(678) 555 3125” }]Some might scratch their heads right now thinking “that’s an awful lot of steps to essentially get the same result.
What do we gain from this?” I’m glad you asked.
The true gain can be summed up in what I called the S.
C.
R.
E.
A.
M.
S principle.
Using it, I try to always ensure that my code is:Self-documenting — hopefully this is an obvious oneComposable — made up word but gives you the ideaReadable — for human first and minified next for machinesEloquent — subjective but you define what is and stick with itAbstraction layer — add it wherever it makes senseMaintainable — small units are easy to testScalable — separate and generic functions are easy to reuseIn closingI have honestly started to make that extra “craft” effort in the past few months and I can admit that it was a very, very slow start.
If that is something that might be of interest to you, I suggest to start with small refactors.
Using a combination of map, filter, reduce and bind, call, apply is your Swiss-knife that can carry you a long way and is one of the routes that will help in producing “clean-code” in JavaScript.
If you are convinced, it’s now time to craft some code that S.
C.
R.
E.
A.
M.
S!!!.????A few resourcesFrom the master himself — bookmark it!!!An oldie but still a goodiehttps://javascriptissexy.
com/javascript-apply-call-and-bind-methods-are-essential-for-javascript-professionalsCan’t thank Cristian Salcescu enough for this great pieceHow point-free composition will make you a better functional programmerCheck my Discover Functional JavaScript and Functional React books.
medium.
comHello I’m Ady Ngom.
Professionally I carry the fancy title of Solutions Designer / JS Tech Lead.
At the core though, I’m just a passionate about all things JavaScript and the Front-end ecosystem.
Connect with me on Twitter, LinkedIn and visit my blog adyngom.
com.. More details