Functional Programming, Simplified

A visual introduction to functional programming

Héla Ben Khalfallah
Jan 12 · 10 min read
Building photographed from a sideways angle
Building photographed from a sideways angle
Photo by Jackson Jost on Unsplash.

What’s Functional Programming?

How things work inside the warehouse
How things work inside the warehouse
Inside the warehouse — Image by the author
Functions pipeline
Functions pipeline
Functions pipeline — Image by the author
Immutable inputs through function transformations
Immutable inputs through function transformations
Immutable inputs through function transformations — Image by the author

Recap

Isolate and replace

Diagram showing why it’s easy to isolate errors and replace the defective component
Diagram showing why it’s easy to isolate errors and replace the defective component
Easy to isolate errors and replace the defective component — Image by the author

Expandable and easy to rearrange

Adding the Automatic Supervision step
Adding the Automatic Supervision step
Adding the Automatic Supervision step — Image by the author
Inserting a new function
Inserting a new function
Insert new function — Image by the author
Rearranging
Rearranging
Rearrange — Image by the author

Predictable and deterministic

How functional programming filters out all external noise
How functional programming filters out all external noise
Functional programming filters out all external noise — Image by the author
Diagram displaying predictable behavior
Diagram displaying predictable behavior
Predictable behavior — Image by the author

Reducing complexity

f(x) = (2x+3)g(x) = x²h(x) = (g º f)(x) =  g(f(x)) = (2x+3)²
Functions pipeline
Functions pipeline
Compose to reduce complexity — Image by the author
const finalOutput 
= double º sort º display
= display(sort(double(array)))

Higher-Order Functions

“Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions.” — Eloquent JavaScript

Higher-order function
Higher-order function
Higher-order function — Image by the author
const data = [1, 4, 2, 8];const double = x => x * 2;
const plusOne = x => x + 1;
console.log('double array : ', transform(data, double));
console.log('plus one array : ', transform(data, plusOne));

Higher-order functions in JavaScript

map function
map function
map to transform an array — Image by the author
const sequence = [1, 2, 3, 4, 5];
const doubleSequence = sequence.map((item) => item * 2); // [2,4,6,8,10]
How JS map works
How JS map works
How JS map works — Image by the author
filter function
filter function
filter an array — Image by the author
const isString = value => typeof value === 'string';const values = [12, 'Hi', 1, 'Sun', 'Sky', 8];const valuesMatched = values.filter(isString);console.log('valuesMatched : ', valuesMatched); 
// "valuesMatched : ", ["Hi", "Sun", "Sky"]
How JS filter works
How JS filter works
How JS filter works — Image by the author
[12, 5, 8, 130, 44].every(elem => elem >= 10); // false
[12, 54, 18, 130, 44].every(elem => elem >= 10); // true
[{a:1, b:2}, {a:1, b:3}].every(elem => elem.a === 1); // true
[{a:2, b:2}, {a:1, b:3}].every(elem => elem.a === 1); // false
[2, 5, 8, 1, 4].some(elem => elem > 10); // false
[12, 5, 8, 1, 4].some(elem => elem > 10); // true (12)

How to Chain Functions

Chaining small functions
Chaining small functions
Chaining small functions — Image by the author
const complexArray = [6, 2, 4, 8]
.map(x => x * 2)
.map(x => x + 1)
.filter(x => x > 10);
console.log('complexArray : ', complexArray);
// "complexArray : ", [13, 17]

Safety in Functional Programming

Functors

const increment = v => v + 1increment('5') // '51'increment({ v: 5 }) // "[object Object]1"
const double = (v) => {
if (typeof v !== 'number') {
return NaN
}
return v * 2
}
The magic behind NumberBox
The magic behind NumberBox
The magic behind NumberBox — Image by the author
const safeResult = NumberBox({
v: 5})
.map(v => v * 2) // -> executed
.map(v => v + 1) // -> executed
.value // NaN

The Maybe monad

Functor vs. Maybe
Functor vs. Maybe
Functor vs. Maybe — Image by the author
Maybe flow
Maybe flow
Maybe flow — Image by the author
MayBe(Backend.Call()).map().map().getOrElse();

Conclusion

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Héla Ben Khalfallah

Written by

I love coding whatever the language and trying new programming tendencies. I have a special love to JS (ES6+), functional programming, clean code & tech-books.

Better Programming

Advice for programmers.

Héla Ben Khalfallah

Written by

I love coding whatever the language and trying new programming tendencies. I have a special love to JS (ES6+), functional programming, clean code & tech-books.

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store