Imperative vs Functional Paradigms-By Example

Well known images for various programming paradigms

TR;DR

This is to showcase the fundamental programming styles. The objective of this article is to provide possible implementations in both styles. The unit tests provided with the code is gravy. 

Sample Code:

The complete sample is available on jsFiddle .

Prerequisites

Basic knowledge of JavaScript.

Intent

This is the functional programming equivalent to the hello world introduction samples. It is intended to invoke sufficient interest to coax you to explore this topic further.

 I have leveraged chai, mocha, expect libraries in the code sample to demonstrate assertion of code quality to non-technical audience. However it is not central to the Functional Programming Topic.

Introduction

Below is the same functionality implemented using Imperative and Functional styles.

Solution I : Imperative style

No alt text provided for this image

As you can see from the sample segment , this style is coded one step after another. The function nameShuffler does majority of the effort and has another function iterator as a dependency. These functions are coupled together .There is a risk of breaking the functionality when any of the functions are modified.This sample is contrived but in real life, it would probably be more complex. In real life maintaining the code as well as standing up test fixtures is challenging when the application evolve organically.

Solution II : Functional Programming style

Sample code show casing the functional approach

In this approach the functions stand alone without any dependency on each other. This promotes reuse of existing functionality. The key take away is that functions should have a single responsibility and not have any external dependencies.The intent of the original authors is more intuitive.The code structure promotes reuse.

No alt text provided for this image

The magic happens between 52 to 54 line numbers in the illustration above.

  1. Line 52 defines the function array taking part in this composition .
  2. Line 53 the compose function executes the functions in the array (on line 52) passing the output of the previous function as input into the next leveraging the in-built JavaScript library function reduce
  3. Line 54 Invokes the compose function passing the array and the string parameter with the curry technique.

Future Steps

Do not be intimidated by myriad new terminology. There are plenty of tutorials available. It does take some effort to wrap your head around the fundamentals especially when you are historically from the imperative camp like me. But as the saying goes no pain no gain.

You can also explore the published npm package below which includes more functional programming principles.

Disclaimer

This is not an academic study of functional programming. The intent is to get you sufficiently intrigued to explore this further. This topic has been more eloquently illustrated by the experts on the web. I will make no attempt to repeat it here. See references below. Full disclosure, I do not make any claims to be an expert. I am just a functional programming enthusiast who would like to share some of my leanings during my journey.

Acknowledgements

  1. Shout out to ?? James Sinclair who made amazing tutorials on functional programming concepts and terminology.
  2. This tutorial authored by ?? Krzysztof Czernek has been valuable in the assimilation of the concepts. I have also been inspired to adapt the segments of his code to the samples provided here.

References

#Javascript #unittesting #chai #mocha #functionalprogramming

Steven Archibald

Sr. Software Architect + Lead/Engineer

4 年

Thanks! Looks good...

回复

要查看或添加评论,请登录

Suresh Rao的更多文章

社区洞察

其他会员也浏览了