Is Functional Programming Worth Learning?

There are a lot of jargon words in tech, and it is tough to understand them when you start software engineering or any IT profession. Words like functional, object-oriented, procedural, and dynamic programming are enough to make your head spin and intimidate you. Is functional programming worth learning?

I chose Javascript to give you this intro because it has a low learning curve and is one of the best web development languages.

Functional programming is a programming paradigm that is popular in the software engineering world. It is a broad topic, and there have been many books about the subject and hours upon hours of youtube videos.

I am not a programming expert; no one is. Functional programming has critical concepts and methods crucial to understanding to help your programming career.

I want to give you a foundation for the core concepts of functional programming.

Why I Like Functional Programming

One of the main reasons I love functional programming, which is one reason many people love functional programming, is that functional programming is not mutable. What the heck does that mean?

If you are coding functionally, the state should be mutable, meaning the data should not change.

Immutable Data Types

Some data types are immutable in Javascript, strings, and numbers. I will give you an example of this below.

Strings

You can see here that the original data inside the variable did not change, which means the data type is inherently immutable.

Numbers

Numbers are also an immutable data type.

The data in num1 and the num2 variables don’t change.

But what are mutable data types?

Mutable Data Types

1. Arrays
2. Objects

Arrays

By nature, Arrays do change state.

You would expect the same output here as in the previous examples because you use the same syntax, but the original Array changes.

Objects

Objects act the same way as Arrays.

You want to keep track of the initial state so that it is easier to debug. It would be nice if we could see the original state.

How to Achieve Immutability

Let me introduce you to some magic. You may even become the Harry Potter of programming. Immutability in programming sounds like something they would make in the potions class in Harry Potter.

Immutability in Arrays

Let me give you an example of immutability for Arrays.

ES 6 introduced us to the spread operator. The spread operator is magical three dots that spread in the original data.

Oh my gosh! This is cool! I bet I rocked your socks off. When I got taught this, my socks were rocked off too. My socks had holes, so I didn’t care that they were rocked off. I have since gotten new socks. So, I am no longer holy… lousy pun.

You can also use the spread operator to make array methods, push, pop, splice, shift, unshift, reverse, and sort, mutable.

Immutable Array Functions

Map

Map() brings back an array without altering the initial Array and manipulates the new Array based on conditions. I have included an example below.

1. const array1 = [1, 4, 9, 16] – We initialize a new array stored in the Javascript program memory.
2. const map1 = array1.map((x) => x * 2); – Make a new array containing all the elements multiplied by two from the original Array
3. console.log(array1); – This prints out [ 1, 4, 9, 16 ]
4. console.log(map1); – This prints out the elements of the new Array [ 2, 8, 18, 32 ]

Filter

Filter () gives us a new array without modifying the old Array and returns certain array elements based on conditional logic.

1. const array1 = [1, 4, 9, 16] – We initialize a new array stored in the Javascript program memory.
2. const filterArray = array1.filter((x) => x > 2); – Make a new array containing all the elements greater than two from the original Array
3. console.log(array1); – This prints out [ 1, 4, 9, 16 ]
4. console.log(filterArray); – This prints out the elements of the new Array [ 4, 9, 16 ]

Reduce

Reduce manipulates each element and gets one output. For example, consider the following.

1. const array1 = [1, 4, 9, 16] – We initialize a new array stored in the Javascript program memory.
   1. const filterArray = array1.reduce((acc, curr) => acc + curr); – Returns the sum of all the elements in the Array. Internally this function loops through every element in the Array. Since there are four elements, it loops four times. acc stores the rolling sum, and curr symbolizes the current element of the loop.1st loop, acc is 0, curr is 1. acc becomes 1 because 0 +1 = 1.
   2. 2nd loop, acc is 1, curr is 4. curr becomes 5 because 1 + 4 = 5.
   3. 3rd loop, acc is 5 and curr is 9. acc becomes 14 because 5 + 9 = 14.
   4. 4th loop, acc is 14, and curr is 16. acc becomes 30 because 14 + 16 = 30.
   5. Since we can’t loop anymore, reduceArray is 30 because curr returns 30.
2. console.log(array1); – This prints out [ 1, 4, 9, 16 ]
3. console.log(reduceArray); – This prints out the value of reduceArray, which is now 30.

Immutability in Objects

Objects are mutable too.

Do you feel like a wizard yet? Javascript made a lot of improvements with ES6 to mimic pure functional programming languages like Scala.

What amazing things can you do with this newfound knowledge?

Recursion

Recursion abstracts away a loop and calls the function within the function, like programming inception. In functional programming, we use recursion instead of a loop.

Understanding what is happening here takes a lot of work to get your head around. For me, recursion was the most complicated concept of functional programming.

FreeCodeCamp has an excellent article that helps you understand recursion.

What You Can Do With Functional Javascript

I love Javascript’s great library with many functional concepts to it, React. One of React’s state management systems, Redux, is entirely functional. I have used React and Redux in almost all of my projects, and this is just an example of a library you can use that relies on functional programming in Javascript.

Understanding the differences between functional and object-oriented programming can also offer insights into why certain paradigms might be more suitable for specific types of projects.

To incorporate more in-depth examples that showcase the strengths of functional programming (FP), it’s essential to demonstrate scenarios where FP concepts directly address common software development challenges. Below are detailed examples emphasizing state management, code readability, and performance enhancement:

Simplifying State Management in Large-Scale Applications

Example Context: Consider a web application managing a complex user interface with multiple components needing shared state access, such as a dashboard displaying user analytics, notifications, and real-time data feeds.

FP Solution: Utilize the Redux library (inspired by functional programming principles) for state management in a React application. Redux employs a single immutable state tree and pure functions (reducers) to manage changes in state, making the state predictable and easier to debug.

Code Snippet Example:

// Reducer function
const analyticsReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'UPDATE_DATA':
            // Utilizes immutability by returning a new state object
            return {
                ...state,
                analyticsData: action.payload
            };
        // Add other cases as needed
        default:
            return state;
    }
};

// Action to update analytics data
const updateAnalyticsData = (data) => ({
    type: 'UPDATE_DATA',
    payload: data
});

Explanation: The reducer function takes the current state and an action, then returns a new state based on the action type without mutating the original state. This functional approach simplifies debugging and testing, as state changes are predictable and traceable.

Improving Code Readability with Functional Composition

Example Context: Processing a list of transactions to extract a specific subset, calculate totals, and apply currency formatting.

FP Solution: Use functional composition to create a pipeline of operations, each function taking input from the previous one, transforming the data step by step in a readable manner.

Code Snippet Example:

const transactions = [/* array of transaction objects */];

const filterByCategory = (transactions, category) => 
    transactions.filter(t => t.category === category);

const sumAmounts = (transactions) => 
    transactions.reduce((acc, curr) => acc + curr.amount, 0);

const formatCurrency = (amount) => `$${amount.toFixed(2)}`;

// Compose functions to process transactions
const totalSpentInCategoryFormatted = (transactions, category) =>
    formatCurrency(
        sumAmounts(
            filterByCategory(transactions, category)
        )
    );

console.log(totalSpentInCategoryFormatted(transactions, 'Groceries'));

Explanation: This example demonstrates how breaking down operations into small, reusable functions and chaining them together improves code readability and maintenance. Each function does one thing and does it well, adhering to the FP principle of pure functions.

Next Steps

I recommend you dive into this trendy paradigm. Functional programming has been around for years but has become a hot topic recently. FreeCodeCamp has a topic in their curriculum about functional programming in Javascript. You will likely find Youtube videos to supplement your learning on the subject.

I have a few questions that I would love to hear your feedback on.

1. What is your experience with functional programming?
2. What is your favorite part of functional programming?
3. What are other key concepts essential to consider?

And if you’re pondering the foundational skills necessary in this field, our article on whether developers should test their own code discusses a crucial aspect of software development that complements functional programming knowledge.

Share my article on social media and follow me on Twitter for extra content.