Functional Programming in JavaScript Explained

Functional Programming in JavaScript Explained

Functional programming has become a really hot topic in the JavaScript world. You'll learn: what functional programming is, the types of functions there are, the principles of functional programming, and have a deeper understanding of Higher Order functions.

One of the hardest things you have to do in programming is control complexity. Without careful consideration, a program's size and complexity can grow to the point where it confuses even the creator of the program.

In fact, as one author put it:

"The art of programming is the skill of controlling complexity" - Marijn Haverbeke

In this article we will break down a major programming concept. This programming concept can help you keep complexity under control and write better programs.

By the end of this article, you will know what functional programming is, the types of functions there are, the principles of functional programming, and have a deeper understanding of Higher Order functions.

I assume that you already have pre-existing knowledge of the basics of functions. The fundamental concepts of functions will not be covered in this article.

What is Functional Programming?

Functional programming is a programming paradigm or style of programming that relies heavily on the use of pure and isolated functions.

Just as you might have guessed from the name, the use of functions is the main component of functional programming. But, merely using functions doesn't translate to functional programming.

In functional programming, we use pure functions, which are functions that don't have side effects. I will explain what all of this means.

Before diving deeper into the article, let us understand some of the terminology and types of functions there are.

Types of Functions

There are four main types of functions.

First Class Functions

In JavaScript all functions are first class functions. That means they can be treated like any other variable.

First class functions are functions that can be assigned as values to variables, returned from other functions, and passed as arguments to other functions.

Consider this example of a function passed to a variable:

const helloWorld = () => {
    console.log("Hello, World"); // Hello, World
};
helloWorld();

Callback Functions

Callback functions are functions that are passed into other functions as arguments and are called by the function in which they are passed.

Simply, callback functions are functions that we write as arguments in other functions. We can't invoke callback functions. They are invoked when the main function in which they were passed as arguments is called.

Let's look at an example:

const testValue = (value, test) => {
    if (test(value)) {
        return `${value} passed the test`;
    } else 
        return `${value} did not pass the test`;
};
const checkString = testValue('Twitter',  string  =>  typeof  string === 'string');
checkString; // Twitter passed the test

testValue is a function that accepts a value and a callback function test which returns "value passed the test" if the value returns true when passed into the callback function.

In this case, the callback function is the second argument we passed into the testValue function. It is invoked when the testValue function is called.

Higher Order Functions

Higher order functions are functions that receive other functions as arguments or return a function.

In this article, am going to further elaborate on higher order functions and why they are such a powerful provision. For now, all you need to know is that these types of functions receive other functions as arguments or return functions.

Asynchronous Functions

Asynchronous functions are functions that don't have a name and cannot be reused. These functions are normally written when we need to carry out something once and in only one place.

A perfect example of an asynchronous function is what we wrote earlier in the article.

const checkString = testValue('Twitter',  value  =>  typeof  value === 'string');
checkString;

// Refer to previous code snippet

checkString is a variable whose value is a function. We pass two arguments into this function.

'Twitter' is the first argument and the second is an asynchronous function. This function has no one name and has only one task: to check whether the given value is a string.

javascript functional programming web-development developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Understanding Functional Programming in JavaScript

Functional Programming in JavaScript teaches you techniques to improve your web applications: their extensibility, modularity, reusability, and testability, ...

filterMap in JavaScript, efficiency for functional programming

All JavaScript developers are awesome and they deserve a brilliant way of filtering and mapping over an array with just one function with a linear complexity O(n) of one run through the array.

Functional JavaScript :  Functional Programming and Arrays

Functional JavaScript :  Functional Programming and Arrays. Create our own map and filter functions. We’ll look at how to create our own array methods. JavaScript is partly a functional language. To learn JavaScript, we got to learn the functional parts of JavaScript.

What is Functional Programming?

Most of what I will discuss in this article is knowledge accumulated from reading, “Functional Programming in JavaScript”, by Luis Atencio. In simple terms, functional programming is a software development style that places a major emphasis on the use of functions.

Functional Programming in JavaScript

Let’s talk about the raw way of writing functions. Functions perform certain set of actions according to our requirements which could include fetching data, updating State, changing a set of mutable values and updating the DOM and so on.