DEV Community

loading...
Cover image for Intro to Functional JavaScript

Intro to Functional JavaScript

aakatev profile image Artem ・2 min read

This article is based on my old cheatsheet. It only includes methods provided by Vanilla JS. If you are looking for more advanced patterns, I recommend to look into Ramda.

Do you know that out of the box JavaScript has some amazing parts, making it suitable for Functional Programming?

Folding, Reduction, and Filtering

Let's say we have ten bank accounts.

let accounts = [
  { id: 0, balance: 122.01 },
  { id: 1, balance: 15.111 },
  { id: 2, balance: 7703.5 },
  { id: 3, balance: 9333.2 },
  { id: 4, balance: 1472.111 },
  { id: 5, balance: 993.5 },
  { id: 6, balance: 0.222 },
  { id: 7, balance: 1599.111 },
  { id: 8, balance: 779.5 },
  { id: 9, balance: 93.2 }
];
Enter fullscreen mode Exit fullscreen mode

To warm-up, let's find the total balance. We can do it by folding account balances using addition operator, and initial value of 0. In JavaScript it can be accomplished using reduce().

let totalBalance = accounts.reduce(
  (sum, account) => sum + account.balance,
  0
);
Enter fullscreen mode Exit fullscreen mode

Now, what if we need to get all the accounts with the balance of 700.00 or higher? It is done using filter().

let filteredAccounts = accounts.filter(
  (account) => account.balance > 700
);
Enter fullscreen mode Exit fullscreen mode

What if we only need to work with account ids? Function map() is really helpful for this case!

let ids = accounts.map((account) => account.id);
Enter fullscreen mode Exit fullscreen mode

We can also chain these functions, and manipulate collections in short, and elegant way.

accounts
  .map((account) => account.balance)
  .filter((balance) => balance < 100)
  .reduce((sum, balance) => sum + balance, 0);
Enter fullscreen mode Exit fullscreen mode

Amazing, is not it? Now, let's see some more!

ES6 Destructuring Operator

We have an array of ten numbers.

let numbers = [0,1,2,3,4,5,6,7,8,9];
Enter fullscreen mode Exit fullscreen mode

This is how we can iterate, and print them using the Tail recursion.

function printArray(array) {
  if(array.length > 0) {
    let [head, ...tail] = array;
    console.log(head);
    printArray(tail);
  }
}
Enter fullscreen mode Exit fullscreen mode

Using the destructuring operator, we can also create variadic functions, similar to ones in LISP.

function variadicPrint(...array) {
  array.forEach(element => console.log(element))
}
Enter fullscreen mode Exit fullscreen mode

All the following calls to the function above are legal.

variadicPrint(0, 1, 2, 3);
variadicPrint(0);
variadicPrint();
variadicPrint("Hello", "world");
Enter fullscreen mode Exit fullscreen mode

Finally, I already posted an article about closures, which is probably the best part of the JavaScript.

Discussion (0)

pic
Editor guide