Another post that talks about lodash/fp (with Vue)

In my previous post, "My First Look at Functional Programming," I mentioned my intention to try using fp-ts. While I'm still learning about functional programming, I believe it can be advantageous for software development. To demonstrate the advantages of functional programming, I created a todolist-vue web app using Vue and Tailwind Elements as an example. In this post, I will be using lodash/fp to modify the implementation of the functions in the example, which I hope will offer some insights into the benefits of this coding style and whether it's worth adopting.

For reference, the imperative version of the same app from the previous post.

TL;DR

By utilizing the utility functions from lodash/fp, we can harness the advantages of functional programming. Two functions that I find particularly beneficial for my project are:

• cond-- an expression-based version of if-else statements
• flow-- an function to call its parameters in order

Parts that are not as pleasant:

You need to become familiar with the functions, although the function names do provide information about their uses. Sometimes, the explanations of the functions in the official documentation of lodash are not very good. Fortunately, since it's a commonly used library, you can find tons of tutorials on the internet, such as this one.

Lodash and lodash/fp

So, as mentioned in the Lodash documentation, it's a library for JavaScript that provides various utility functions. There is a helpful introduction titled Things to keep in mind when using Lodash that you might want to take a look at. The concerns discussed in the article revolve around the bundle size and the implementation of functions, which may be a pitfall that can make debugging challenging.

lodash/fp is a functional programming version of Lodash, with some differences mentioned in the linked page, we can use it to write codes in functional programming style.

ℹ️ There are libraries which has similar usage:

• Ramda
• Rambda
• Radash

The Utilities

Although there are many functions, for me, it's cond and flow that make the code look like a functional programming language. Shamefully, I only talk about these two in the article... 😅

It's worth mentioning that the methods from lodash/fp come with auto-currying, a feature commonly seen in functional programming languages such as Elm and PureScript.

• elm

add : Int -> Int -> Int
add x y =
    x + y

addFive : Int -> Int
addFive =
    add 5

result : Int
result =
    addFive 3 -- result will be 8

code source: How to partially apply functions in Elm

• PureScript

mul :: Number -> Number -> Number
mul a b = a * b

times2 :: Number -> Number
times2 = mul 2
-- It's like const times2 = b => mul(2)(b) in JavaScript

code source: TypeScript vs. PureScript

cond

Within the file path src/components/TwButton.vue, the styleContext is determined using a switch statement. Although it functions properly, it creates two scopes: one for the arrow function provided to the computed function and another for the switch statement. This redundancy is somewhat unnecessary since we only need to return the value provided by the switch statement. (Yes, you cannot just return the switch statement without placing it to a function scope.)

const styleContext = computed(() => {
    switch (props.context) {
        case 'success':
            return 'bg-success'
        case 'danger':
            return 'bg-danger'
        case 'warning':
            return 'bg-warning'
        case 'info':
            return 'bg-info'
        default:
            return 'bg-primary'
    }
})

cond is an expression-based version of an if statement. It accepts an array consisting of arrays that represent the match patterns and their corresponding actions.

ℹ️ In the future, JavaScript might introduce a native pattern matching syntax, as proposed by TC39. This syntax would provide built-in support for match patterns in JavaScript.

const styleMatcher = cond([
    [eq('success'), constant('bg-success')],
    [eq('danger'), constant('bg-danger')],
    [eq('warning'), constant('bg-warning')],
    [eq('info'), constant('bg-info')],
    [stubTrue, constant('bg-primary')]
])
const styleContext = computed(() => styleMatcher(props.context))

flow

Usually, to get an abstraction, we write assignments, function calls like the function resetSelect (path: src/components/TwSelector.vue):

const resetSelect = () =>
  selectRef.value
    ?.querySelector("span[data-te-select-clear-btn-ref]")
    ?.dispatchEvent(new Event("click"));

const resetSelect = flow(
  constant(selectRef),
  get("value"),
  invokeArgs("querySelector", ["span[data-te-select-clear-btn-ref]"]),
  invokeArgs("dispatchEvent", [new Event("click")])
);

ℹ️ Unlike the functions from lodash, they does not support chaining, and lose shortcut fusion:

It means combining (fusing) functions that are going to be applied to elements into a single call and calling it on the elements in one go, instead of requiring passes
-- Brilliant But Lazy

ℹ️ This article has an example that implements shortcut fusion.

Conclusion

I no longer take "FP" as a magic word that solves every problem I encounter in OOP. It turns out JavaScript does have some, but not all, the features of a functional programming language. With the help of libraries, we can enjoy benefits such as improved readability and purity of methods. However, under the hood, these libraries use functions that imitate the mechanisms of functional programming languages in JavaScript, which may result in reduced efficiency during runtime.