DEV Community

Functional vs Imperative Patterns in JavaScript

JavaScript Joel on October 16, 2018

The intention of this post is not to say one paradigm is better than the other. It is just to show common patterns you run into and their functiona...
Read full post
Collapse
 
avalander profile image
Avalander • 
reduceWhile (() => lte3) (add) (0) (values)

This almost looks like lisp, I like it ❤️

Collapse
 
joelnet profile image
JavaScript Joel •

One trick I learned recently to making curried functions readable is to format them with spaces between the parens. I live this style :

I also have eslint-config-mojiscript to enforce this with eslint!

Cheers!

Collapse
 
avalander profile image
Avalander •

Yeah, I add the spaces between the parenthesis too, but I don't curry all functions by default, only when I need so to do function composition.

Thread Thread
 
joelnet profile image
JavaScript Joel •

That was one requirement of MojiScript, all functions must be curried. When every function is curried, every function can be composed!

There are also no callbacks. Every callback-style function must be promisified.

Cheers!

Collapse
 
joelnet profile image
JavaScript Joel •

If you allow mutations, you have to deep clone. If you disallow mutations, shallow cloning is enough.

This is how libraries like list or immutable.js are so fast. They disallow mutations.

One of the advantages of FP.

Collapse
 
maple3142 profile image
maple •

I found that for-loop sometimes is more readable than functional version, but functional version is better in most case.
For example, I will use for-or along with awaitwhen I want to await multiple promises one by one.

for(const url of urls){
  await fetch(url)
}

vs

await urls.reduce((p,url)=>p.then(()=>fetch(url)),Promise.resolve())
Collapse
 
joelnet profile image
JavaScript Joel • • Edited

I agree with you about that example being easier to read. I would still prefer consistency in the app and ban all for loops in favor of map reduce and filter.

You could also break the one liner down a bit to help with readability and reusability.

const serialFetch = (promise, url) => promise.then(() => fetch(url))
await urls.reduce(serialFetch, Promise.resolve())
Collapse
 
foxdonut00 profile image
Fox Donut •

Great article, @joelnet !

Collapse
 
joelnet profile image
JavaScript Joel •

Thanks! I appreciate the kudos. They keep me writing more :)

Cheers!

Collapse
 
jay97 profile image
Jamal Al •

I think functional style is nice but not in all cases. For loops and if statements are part of the language, why would u use external library over something that's already available to u?

Collapse
 
joelnet profile image
JavaScript Joel •

You can't be immutable with for loop. If statements also encourage side effects and mutations.

When your code base is all functions, you can create new functions from existing functions.

Composability depends on limiting side effects and preventing mutations.

There are many many benefits that aren't fully realized until you inmerse yourself into an FP codebase.