Taking functional programming to JavaScript objects

Taking functional programming to JavaScript objects

Functional programming seems to be where the hype is nowadays — And for good reason; It can drastically reduce the amount of boilerplate code that you have to write in comparison to imperative programming which allows you to improve the readability of your code and consequently, maintainability.

Functional programming seems to be where the hype is nowadays — And for good reason; It can drastically reduce the amount of boilerplate code that you have to write in comparison to imperative programming which allows you to improve the readability of your code and consequently, maintainability.

However, it can often be hard to apply functional programming concepts to objects. This is because the functional programming style relies heavily on iteration and method chaining. Both of which are more intuitively applied to arrays or lists. But this is a misconception!

Let’s jump right in and try to use some functional programming concepts to solve problems that involve objects. Say we have an object like so:

const foo = {
      a: 10,
      b: 25,
      c: 30,
      d: 45,
    }

And we want to only have all of the fields that have an even value and everything else can be removed. Traditionally (and non-functionaly!), we might do something like this:

This might seem like a fine solution but a lot can go wrong. Using continue statement leaves us prone to bugs as well as explicitly setting the bar[key]. Instead we can achieve the same behaviour functionally like this:

We just reduced our code footprint by a factor of 5 as well as getting extra safety guarantees — We can now 100% guarantee that the values in foo will never be mutated and no new keys will be added.

es6 code javascript programming functional-programming

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

Functional Programming: Higher Order Functions

Functional Programming: Higher Order Functions. A Better Take on JavaScript’s Higher Order Functions. Functional Programming is awesome! It makes programming fun.

Functional Programming Series (2): What Is a Monoid?

A monoid is fundamental to the functional programming world. For those interested in functional programming, I’ll talk about monoids and why they’re very important to understand ahead of time.

JavaScript = Arrow Functions => ES6

Basic Syntax Explained for Beginners. Arrow function (also known as “fat arrow; =>” function) was introduced in ECMAScript 2015 as a new syntax for declaring functions. JavaScript = Arrow Functions => ES6

From imperative to declarative JavaScript

In this post, I will explain why declarative code is better than imperative code. Then I will list some techniques to convert imperative JavaScript to a declarative one in common situations.

Functional Programming

Functional Programming: Functional Programming is a Declarative style of Programming Paradigm for writing computer programs.