I am a big fan of functional , I enjoy the conciseness of it and it fits my way of thinking better. I also like clean code with as few redundancies as possible. Having said that, it should come as no surprise that point-free (sometimes also called tacit) style appeals to me. Over the last few days I came across several gotchas when applying this style in and decided to write them down. programming JavaScript What is point-free style As : Wikipedia states [Point-free] is a programming paradigm in which function definitions do not identify the arguments (or “points”) on which they operate. This may seem weird at first, but let’s use a simple example. Assume we have a function that takes a string and returns that string with the first letter capitalised. Next, we have an array of strings that we all want to capitalise. This is a simple use case for the : [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function Notice the second use, it does not state the name of the argument and does not create a new function. The reason this works is that calls its first argument as a function taking three arguments: map map the item of the array to process (this is the only mandatory parameter), the index of that item, the whole array being processed Out function happens to also take the item to be processed as its first (and only) argument and so it works when used point-free in this case. capitalise There are more uses for this style and we will see them as we go through the article. Gotcha #1: Function taking more parameters than you expected The first gotcha comes from the fact that you can call a function in JavaScript with as many arguments you want — be it too few or too many. In case you provide too few arguments, those you haven’t provided are set to their default value (which is unless otherwise specified). undefined In case you provide too many arguments, the function ignores the excessive ones (unless it uses the ). [arguments](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments) object This is probably not new to you, in the context of point-free it can lead to some unexpected results, though. Let’s take the simplest of examples: write a function that takes an array of strings and returns the numeric values of the items. For the sake of an example we assume the input is correct. Simple enough, there is for that: [Number.parseFloat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/parseFloat) As we can see, the point-free version works like a charm. Well, what if someone told us the numbers are always integers and we don’t have to parse them as floats? Then we would swap the for the , right? Number.parseFloat [Number.parseInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt) Whoa, what is that? The point-free version behaves rather strange all of a sudden. The reson for this is that while only takes one argument – the string to parse – takes an additional optional argument – the radix of the number to be output (for example 16 for hexadecimal strings). Thus when used in a map like that this is what actually happens: Number.parseFloat Number.parseInt As we can see the radix argument of is set using the index of the current item. That explains the output for the input as 3 is 11 in binary. Number.parseInt 3 11 This is the first type of issue that can arise from point-free in JavaScript: functions taking more arguments than you expect. There is no fool-proof way to protect yourself against this other than using point-free only with functions you know the signature of and know are not going to change, otherwise your code can break unexpectedly. Gotcha #2: Unexpected this This one popped up in a job interview I took not too long ago: The question was to fix the error. One would probably expect to be output (I know I did). Yet, is output to the console. "Hello" undefined The reason for this is the way executes the callback function. The and if is not set explicitly, it will be set to the object. And as (or if run in browser) does not have a member our example prints . setTimeout callback is executed in a different execution context this global global window message undefied There are two way to fix this: The first one uses a closure to set of the call to the proper value. implicitly this getMessage The second (point-free) one makes use of the to set the value of . bind method this explicitly There is another example of a code that seems to be alright — simple regular pattern use: However this ends up throwing a saying: TypeError _Method RegExp.prototype.test called on incompatible receiver undefined_ or a bit more helpfully in Safari: _RegExp.prototype.test requires that |this| be an Object_ Again, the problem is that has an unexpected value (in this case ). The solutions are the same as in the previous case: this undefined The point to take here is that if the function you want to call point-free makes use of , you should be very aware that it is set to what you expect. this Conclusion As much as point-free style is useful in other (functional) languages, in JavaScript it often brings problems that might not be worth the conciseness it brings. I still use it sometimes when the function called is under my control. After these experiences I will be more careful with it, though.

Point-free gotchas in JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Don’t pay the for-loop tax

105 Stories To Learn About Functional Programming

100 Days of Code: Death of Summer on the Island of NixOS

10 Reasons to Learn Scala and Functional Programming

10 Questions for Aswin Ganesh, Noonie Nominee for Functional Programming

The Noonification: Bouncy Castle (1/19/2023)

Don’t pay the for-loop tax

105 Stories To Learn About Functional Programming

100 Days of Code: Death of Summer on the Island of NixOS

10 Reasons to Learn Scala and Functional Programming

10 Questions for Aswin Ganesh, Noonie Nominee for Functional Programming

The Noonification: Bouncy Castle (1/19/2023)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps