Functional vs Object-Oriented Programming

Subscribe to my newsletter and never miss my upcoming articles

In the world of JavaScript, there are typically 2 programming paradigms: Functional and Object-Oriented Programming (OOP). But what exactly are these paradigms, how are they different and when is it best to use them?

What's a Programming Paradigm?

Programming paradigms are approaches in which code is organized to implement solutions in a program. There are many programming paradigms, but we will only focus on Functional and Object-Oriented in this article.

Functional vs OOP

According to Wikipedia, in functional programming, programs are treated as a sequence of stateless function evaluations. In object-oriented programming, programs are treated as a set of interacting objects.

Below is a table from tutorialspoint.com that summarizes some key differences between them. image.png

An Example

To get a better understanding on how to use these 2 different programming paradigms, let's illustrate an example.

Let's say you have this super simple form that calculates the sum of 2 numbers.

image.png

Functional Programming

Let's make the form work with the first approach, functional programming.

Our first function is to perform the calculations from the data supplied.

const x =  document.querySelector('#number1').value;
const y =  document.querySelector('#number2').value;

function sum(x, y) {
    return x + y;
}

Then, another function will output the result on console.

function displayResult(result){
   console.log(result);
}

And that's a simple example with functional programming. Let's take a look at the OOP approach.

Object-Oriented Programming

For this approach, we can create a class for our form in which we add the following properties in the constructor function:

  • form: the form element
  • number1 and number2: the 2 input fields
  • calculateHandler event function, bind to the class to sum inputs and show on console
class SumForm {
  constructor(form, number1, number2) {
    this.form = form;
    this.number1 = number1;
    this.number2 = number2;
    this.form.addEventListener('submit', this.calculateHandler.bind(this));
  }

  calculateHandler(event) {
    event.preventDefault();
    console.log(this.number1 + this.number2);
  }
}

new SumForm(document.getElementById('sum-form'), document.getElementById('number1').value, document.getElementById('number2').value);

And that's the OOP approach for this simplistic example.

Conclusion

There are many ways to solve real-world problems. This translates to programming as well. These 2 programming paradigms are just one of the many different ways you can structure and organize your code to implement solutions.

Understanding on how they work can give you more flexibility in problem-solving as a programmer. Knowing when it's best to use them takes time and experience. Most of the time, you will not use strictly either one of them but a mix of both, depending on the problem.

Thanks for reading! I hope it has been insightful. Please share or like this article if it is and leave questions in the comments below if you have any. Till next time, cheers!

Skay's photo

This is quiet simple but still has some depth. In fact, I've never seriously thought about OOPS paradigm in JS, since whenever it's OOPS, it's server-side Java that comes to my mind.

Júlio César Ködel's photo

I love the way you despict two things entirely equal just rebranding as functional/OOP.

And worst: both are procedural.

Either you don't have the slightest idea of what you are talking about, or you didn't figure out yet how to explain it.

Reading mutable state INSIDE a function breaks all things Functional Programming stands for. This is pure procedural.

Reading mutable state from external source inside the constructor makes that class useless and not reusable (basically, a singleton). This is pure procedural.

Júlio César Ködel's photo

Just to clarify:

In Functional, the function is immutable and idempotent. It should be as simple as `sum = (x, y) => x + y. Doesn't matter how many times you call it with the same parameters, the output is the same. It does NOTHING except the intended function. It is, literally, the sense of a mathematical function (hence the name). It follows the UNIX philosophy (en.wikipedia.org/wiki/Unix_philosophy)

In OOP, there should be two properties for the operands in the class (passed by it through the arguments of the constructor), then the same sum method.

The only difference is that functional receives what it process (they can be static) and OOP stores the parameters in an instance for reutilization.

Input --> Processing --> Output

The basic data processing from the 50's still apply.

BigDealAgile's photo

Thanks so much for this example. Life and solving problems is about making choices. Being open to ideas builds better teams, IMO.

Victoria Lo's photo

Agree with that opinion! Thanks :)

K M H Mubin's photo

You explain this very simply, and also the example helps me to understand the concept.

Obumuneme Nwabude's photo

Thanks for explaining this very well. Especially for using a simple scenario to demonstrate the difference in paradigm.

You've said knowing when is best to use them takes time and experience.

But please go ahead to specify when it is ideal to use which paradigm or even to use both, so that one will be saved that time and experience and will just implement the best method.