As I started to learn to code, I delved directly into web programming so I might say that I skipped the fundamental theories on core concepts and paradigms in programming. I couldn’t tell why I am coding something in that way or follow any rules while coding. In order to explain how I code, I learned and tried out two different programming paradigms, Functional Programming and Object-Oriented Programming in JavaScript.
Let’s shortly present these paradigms and show some examples then we will summarize a table to compare them.
Functional Programming
Functional Programming is a technique that mainly depends on evaluating functions and developing the code structure. The primary goal is here to get input data on one side, process the data then produce the output result on the other side. We try to organize our functions as pure functions if it is possible, this is because the outputs of a function purely rely on arguments of the function and there is no mystery magic that is happening behind the scenes, this is called removing side effects in your code.
Functional languages are good when you have a fixed set of things, and as your code evolves, you primarily add new operations to existing things. This can be accomplished by adding new functions that compute with existing data types, and the existing functions are left alone.
Functional programming provides efficiency, bug-free code, nested functions, and simple programming. Each small function does only its job and can be easily invoked and re-invoked at any time. It helps the code to be managed and statements do not need to be double written. It makes it very modular and harmonically working clean code.
Here is an example of a signup page functionality;
Here we have 5 functions, almost all of them are pure functions with the exception of signupHandler. First, a validation control function(validate) is defined and it is called inside of createUser function which was defined right after it.
Rest of the functions are dealing with HTML form connection. getUserInput function returns values from input fields inside of signupHandler function which contains previously defined createUser function. connectForm function links and adds a event listener on the HTML form to trigger signupHandler function when user submits the form.
Object-Oriented Programming
Object-Oriented Programming is a technique that uses abstraction to create models based on the real world. These object models represent things that we are programming about. These objects can be data structures and can hold data in their attributes and these attributes can be changed through methods(functions) that belong to the other objects or the same object.
For example, we might have an Account object that represents all of the data an account would have: balance, account owner, pin code, expiry date. Those will be the attributes, then the account object would have methods such as deposit money, withdraw money, close account. These would be functions that can manipulate data that object stores.
Object-oriented languages are good when you have a fixed set of operations on things, and as your code evolves, you primarily add new things. This can be accomplished by adding new classes that implement existing methods, and the existing classes are left alone.
One of the biggest advantages of Object-Oriented Programming is that the developer can encapsulate data from outsiders. Encapsulation is the ability to hide variables within classes from outside access. This way the app will not leak any sensitive data and be much more secure.
We should know unlike other Object-Oriented Language there are no classes in JavaScript we have only Object. To be more precise, JavaScript is a prototype-based object-oriented language, which means it doesn’t have classes rather it define behaviors using the constructor function and then reuses it using the prototype.
Here is the previous signup form example with object-oriented style;
Here we have 3 classes that handle all the things needed for signup HTML form to work. Our Validator class has only static methods and attributes so it is never instantiated and User class has the basic blueprint for user that will be created on signup and has ability to print our user details on console when we want to. UserInputForm handles everything related to submitting the form, signupHandler method is making use of Validate class to check inputs on the form and instantiates User class with valid parameters then prints out created User instance information.
Conclusion
I mainly use JavaScript with React even though I’m a bit inclined to use TypeScript more lately. I started using class components then switch to functional components to use Hooks. I have used functional programming paradigm without actually knowing that I do, when I was creating my components and modules. It was the lowest hanging fruit and very suitable for my case.
Both paradigms have their use cases and the question shouldn’t be which one is better than the other. The question should be which one is better solution for my/your problem. At the end of the day the developer is responsible for their own solution and free to select which tools or methods to use.
I will leave you with visual summary of comparison between two methods;
