DEV Community

Fanny
Fanny

Posted on

The beauty of Functional Programming

There are many ways to make a program, probably you already made your program like a serie of commands, this is what we called of "imperative programming" or maybe you do your program keeping things in objects and interacting with them sending messages back and forward, this is "object oriented programming", but today i'll talk about Functional Programming, like the others mentionated, functional programming is a coding style, this is not about put or not ; or put {} after or below the expressions, but it's how we can instruct the program to make the things, in a technical way this is a "programming paradigm". So why you should care about this?

Fun Fun Functions ✨

When we talk about the world of functional programming, everything are functions. And the concept is too similar the math concept, when we study at school, the teacher says something like:

A function is a special relationship between values: Each of its input values gives back exactly one output value

from mathisfun

This definition is really important because give us the basis of our programs, called pure functions, pure functions are functions that only depends of its inputs, they don't look for anything else outside of your world, expect the arguments that you passed through, and only returns the output, they don't affect oher part of world. For example, see these functions, you can say what's wrong with the first?

First version ❌


let age = 19

function getMyAge() {
  console.log(`I'm ${age} years old.`)
}

getMyAge(age)
age = 20
getMyAge(age)
Enter fullscreen mode Exit fullscreen mode

Second Version ✅

function getMyAge(age) {
  return `I'm ${age} years old.`
}

getMyAge(19)
getMyAge(20)
Enter fullscreen mode Exit fullscreen mode

In the first case, the function is looking for a variable outside of your scope, changing the world of some way, in this case the output, the ideal is only return the value and if as you noticed, if we call the function, with same argument(even there's no argument), we get it a different value. In a pure function this is not happen.
Now, you have a basic idea of good things provided by functional programming, but we have more, check it out below our abilities 💪.

Side Effects 🌊

A side effect is any interaction with our outside world that occurs during the calculations, that don't happen using pure functions, and our code, can be more predictale, because our results only depends its inputs, if we know what the function looks like, and which inputs it receives, you can predict the result..

Mutability 🐺

Mutability is about things changeable, here in func. programming the mutability is discouranged. When we have immutable data, its state cannot change after you created, if you need change something, you need create a new value.

Mutable example

function changeFirstElem(array) {
  array[0] = 'Lose yourself to dance'
}

const daftPunkPopSongs = ['Instant Crush', 'Get Lucky', 'One More Time']
changeFirstElem(daftPunkPopSongs)
Enter fullscreen mode Exit fullscreen mode

Immutable example

function changeFirstElem(array) {
  const modifiedArray = ['Lose yourself to dance', ...array]
  return modifiedArray
}

const daftPunkPopSongs = ['Instant Crush', 'Get Lucky', 'One More Time']
const modifiedArray = changeFirstElem(daftPunkPopSongs)

Enter fullscreen mode Exit fullscreen mode

This is awesome, because we make the things more safer, its harder do introduce bugs in our code, also means that is easier to test/debug our code. It's because the one thing that we need to know is about the output, follow the params, and if the output is wrong, we're sure that the problem is our function and not because a random interaction.

Recursion 🥞

Recursion is a technique, in that we can solve a problem in small pieces, this help us to avoid some side effects when we use interactions.

function myCount(int i) {
  if(i >= 10) return 0
  else return i + myCount(i+1)
}
myCount(1);
Enter fullscreen mode Exit fullscreen mode

For me, the recursion makes a code more declarative, more readable and cleaner, although in many scenarios i prefer using iterative way.

The super heroes of Functional Programming 🧚‍♀️

Beyond the recursion, we have tree functions that help us to manipulate the data they are map-filter-reducer. In JS, functions also treated as values, since that, we can pass it a parameter to other functions.

Map, given a collection of data, you can pass a function to transform each item.

const numbers = [1, 2, 3];
const doubles = numbers.map(num => num * 2) //[2, 4, 6]
Enter fullscreen mode Exit fullscreen mode

Filter receives a collection of data, and you can pass a conditional function that returns a subset of collection.

const numbers = [1, 2, 3];
const isGreaterThanOne = numbers.filter(num => num > 1) //[2, 3]
Enter fullscreen mode Exit fullscreen mode

And finally, Reduce, given a collection of data you can reduce to a single value.

const numbers = [1, 2, 3];
const mySum = numbers.reduce((accumulator, num) => accumulator + num) //6
Enter fullscreen mode Exit fullscreen mode

Conclusion 💃

I'm beginning on the study of functional programming, and these things motivates me to start and keep seeing many resources, obviously, functional programming has weakness, but now that's not the point. If you need other resources i'll left some below, enjoy and have-fun!

Books

Hackernoon - Understanding Functional Programming
Professor Frisby's Mostly Adequate Guide to Functional Programming
Functional JavaScript Mini Book by Jichao Ouyang
Pragmatic Function Javascript online book

Talks

Anjana Vankil - Functional Programming: What? Why? How?One of my favourites
Anjana Vankil - Immutable data structures for functional JS
Fun Fun Function Series

Latest comments (27)

Collapse
 
lhmzhou profile image
Linda Zhou • Edited

Glad to see functional programming is having a bit of a renaissance :)

Collapse
 
htewech7 profile image
taha HTEWECH

Thanks Fanny, i am new in programming and this article was awsome

Collapse
 
kelerchian profile image
Alan

These are great. Though you missed one best virtue of FP, the Type System. It's hard to do in js though as js doesn't have any explicit compilation step and compile time type at all.

Check this out dev.to/wolksoftware/why-typescript...

Collapse
 
artoodeeto profile image
aRtoo

Theres a book that ive read that you dont have to force yourself to use recursion because its prone to SO error, like if a base case is not correctly enforced. Although recursion is useful for sorting and tress. nice article btw. :)

Collapse
 
sanousy profile image
Sanousy

Nice article, actually I was going the counter direction, to make C go object oriented

github.com/sanousy/cplus

Collapse
 
nandoabreu profile image
Fernando Abreu

I'm a functional programmer myself, as much as possible. Nice reading your article!

Collapse
 
fannyvieira profile image
Fanny • Edited

Okay, i agree partially with you, because for many friends is confuse the syntax of the loop reassigning the count value many times
i = i+1, and the math perspective this is dont make sense, in recursive way this is declarative, you express what you want and the recursion make the things, although in many scenarios i prefer using iterative way. Since this is my particular opinion and the example was too confuse, i removed. But yes, with recursion we have other problems

Collapse
 
joaoportela profile image
João Paulo dos Santos Portela

There's just this a tiny little thing that you missed:

Where you have:

const numbers = [1, 2, 3];
const doubles = numbers.map(num => num * 2) //[1, 4, 6]

It should be:

const numbers = [1, 2, 3];
const doubles = numbers.map(num => num * 2) //[2, 4, 6]

(notice the comment change)

Collapse
 
garciat profile image
Gabriel Garcia

Hi Fanny! Keep it up! I'm glad to see FP being introduced in different languages

 
fannyvieira profile image
Fanny

Good suggestion,thanks

Thread Thread
 
garciat profile image
Gabriel Garcia

Another option is

function what([x, ...xs]) {
  return ['new first elem', ...xs];
}