What are Composable Function?

Since last year, I came across the concept of Composable function couple of times while learning about Vue3. When I searched on google found nothing about it, hence I might be the first person writing about it. I didn't fully understand this concept until I created my own Package VueNiceValidate.
Hence today I want to share my knowledge about composable function in this blog, which I attained from practical implementation.

If I comprise my understanding in one line then it's like:

Composable Function are functional representation of Class.

Yes, in OOP language like Java, Dart or even Php we have to create class and objects for declaring and using entities. Let's take example of person and fist implement in class way and then functional way.

Suppose you want to have many persons in your application with same properties as name and age. Also you want a common function
displayInfo for each person.
How would you do it? 99% of you would end up answering class and object, because that has been the way since the born of c++ and Java. Even the JavaScript which was suppose to focus on functional paradigm implemented class for the same reason.

Here's how the Person class will look like in JS. In all the language class concept at core will remain the same.

class Person {
    // class variables
    let name;
    let age;

    // constructor
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    displayInfo(){
        console.log(this.name + "is " + this.age + " years old!");
        return;
    }
}

• We will have class name declaration
• Then class private variable declaration like name and age.
• Then we will implement constructor function for defining private variables at the time of creation of object, so no person can be created without name or age.
• At last we will implement all our functions or methods we want to operate over person.

Now let's see how will we create object from this class

const firstPerson = new Person('Yogesh', 29);
firstPerson.displayInfo();
const secondPerson = new Person('Piyush', 24);
secondPerson.displayInfo();

I know till here was just the lame part you already now even if you have small experience with programming languages.

Now What if we want to implement the same concept in functional way without using the class.
If you are a beginner you might think why can't we just make a single file with name and age variable and export the functions.
But it would actually create a common state like state management tool or like static variables and function. The real answer is Composable function.

Composable function are just regular function used in a way so that it creates a new copy of object each time we call it.

As per common notation we start composable function name with use word. In our case usePerson will be the composable function which will create new object of person each time we will call it.

How to implement Composable Function

export function usePerson(personName, personAge){
  let name = personName;
  let age = personAge;
  function displayInfo(){
    console.log(name + "is " + age + " years old!");
    return;
  }

  return {
    displayInfo,
  }
}

• We will create our composable function with the name of usePerson
• This function will take same parameters or arguments which we passed to constructor in class format. Hence it doesn't require any constructor concept.
• We will declare our public or private variable as simple scoped variables inside our composable function. To initialize this variables like constructor we simply initialize them at place of declaration.
• Then we will implement our public or private functions as simple functions.
• At last we will return an object including public properties. The variables and function we don't return will act as private properties, that's it.

Now let's see how will we create object from this composable function.

const firstPerson = usePerson('Yogesh', 29);
firstPerson.displayInfo();
const secondPerson = usePerson('Piyush', 24);
secondPerson.displayInfo();

Here we are creating firstPerson and secondPerson object by just calling usePerson function. This composable function will create new copy of name, age, displayInfo each time it will be called.

It's even more simpler then class way or OOP way because it doesn't include concept like constructor or public, private variables, Just function, function and function. That's the beauty of functional programming.

I hope you enjoyed reading this and fully understood the concept of composable functions.

Thanks and Regards,
Yogesh Galav