Functional Programming: Array methods and salads

When first learning a programming language, it can be quite difficult to understand the concepts and syntax, especially when you've never written a line of code before. As someone that has been coding (on and off) for the past year, I can testify to the difficulties of understanding programming concepts.

During the pandemic, I decided to learn to code as, like many others, I had quite a lot of free time. For me, one of the most challenging parts of the experience was when I first began learning JavaScript. Having swiftly moved on from HTML and CSS, I found myself struggling to grasp even the most basic principles.

I quickly realised that I wasn't the only one...

After watching some videos and reading some articles, I moved on to Code Wars to practise the very little JavaScript I knew. At this point, I was still trying to get my head around for loops! The biggest problem with for loops was how complex things can quickly become e.g having a for loop inside a for loop!

My struggles began to change when I discovered Functional Programming. In short, Functional Programming is a programming paradigm that focuses on structuring your code using functions. An array method, in this case, higher-order functions, are functions that operate on other functions, either by receiving them as arguments or by returning them.

The three main higher-order functions are: Map, Filter and Reduce.

From what I've seen many new developers are reluctant to move to functional programming for whatever reason. In my opinion, the best way to learn JavaScript is to try to understand how higher-order functions work.

This is because it poses three main advantages:

Your code will be smaller and cleaner
Easier to debug
It will help you once you start learning frameworks

However, it can be quite tricky to grasp the different ways in which these methods operate. So I've come up with a small analogy to help those who are new to higher-order functions.

The Salad Analogy

In order to create a salad dish, you have to gather the ingredients, chop them all up and mix them together.

We can use the array methods to help carry out this task.

Map

First, we will need to chop up all the ingredients. Let's imagine that the ingredients as nested inside an array called 'ingredients'.

const ingredients = [cucumber, tomatoes, avocado, lettuce, fetacheese]

We can use .map() to carry out the chopping operation on every one of the ingredients.

Here is an example:

const chopped = ingredients.map(ingredient ⇒ ingredient / 6)

This would divide every ingredient into slices of 6.

Filter

The filter() method allows you to remove any elements that you wish from an array.

Let's say you remembered that your friend doesn't like tomatoes, so we would need to remove the tomatoes from the list of ingredients. We can achieve this by using .filter():

const ingredients = [cucumber, tomatoes, avocado, lettuce, fetacheese]

const removedTomatoes = ingredients.filter(ingredients ⇒ ingredients === 'tomatoes")

console.log(removedTomatoes)

console: [cucumber, avocado, lettuce, fetacheese]

Reduce

Now that we have all of the right ingredients chopped up! We have to then mix it all together.

We can do this with the .reduce() method.

const reducer = (previousValue, currentValue) => previousValue + currentValue;

Here the currentValue will be the sum of the previousValue and currentValue. Once it works through the whole array it will return the sum of all elements within the array.

In this case, it will return a salad with all the ingredients mixed together.

Conclusion

Hopefully, this little analogy can help you with getting to grips with the intricacies of using higher-order functions. If in any doubt here are some resources that can assist with developing our understandings further