DEV Community

Bhavesh Daswani
Bhavesh Daswani

Posted on

OOP vs FP with Javascript

In this article i want to explain you about when to use what. For which problem functional programming is good and for which problem OOP is good. It is not necessary to use only one paradigm at a time we can combine them and use the power of both paradigm. One example that come into my mind is of react app which uses the power of both the paradigm,for statefull component we use class component(OOP) and for stateless component that is which mainly deal with view part was in functional component (before hooks were introduced).

Before reading below i am assuming you are familiar with OOP and FP in javascript. If not please go through from my article i have written on OOP and FP
OOP in Javascript
FP in Javascript

OOP vs FP:

OOP programming organizes the code as a unit. Here the unit or the object contains the information and operation that belong to same concept. The pieces of the information that reside in the unit are called attribute or state. The operation that can be happen on state are called method. The pillars of OOP are -

  • Encapsulation
  • Abstraction
  • Inheritance
  • Polymorphism

FP consider data and operation as two different thing. It is all about avoiding side effect and writing pure functions.Functions should not modify its outer world and its return value depends on the argument provided. It is based on different concepts like Pure function, HOF(Hige Order Function), Refrential transparency etc. In it function are first class citizen. I think in FP pure function and compose can provide you extremely powerful results

Both OOP and FP are paradigm that is a design pattern for solving the common problem that is to make our code manageable , managable in the following sense:

Alt Text

  • Clear and Under-stable: OOP and FP organizes the code in such a way that it becomes easier for other developer to understand over code and also it make our code mode cleaner
  • Easy to extend: As the app grows and numbers of developers increases, this paradigms makes easier to extend the code.
  • Easy to maintain: OOP and FP makes code cleaner, this also makes code more maintainable like fixing bug, adding functionality becomes more easier
  • Memory efficient: In OOP we have concept of inheritance and in FP we have concept of closures which make program more memory efficient.
  • DRY: Dry means Do not repeat yourself.This paradigm if truly followed it avoids duplication of code by using inheritance in OOP and reusable functions in FP

Difference Between FP and OOP

  • FP is good for many operation on fixed data while oop programming is good for few operation for common data
  • FP is stateless means it does not modify the state of the program by return new state every time in immutable fashion while OOP is statefull, its method changes the state of its properties.
  • FP is about having pure function that has no side effects while OOP has side effect as it modify its state.
  • FP is declarative it focuses on what need to be done while OOP is imperative it focuses on how the things should be done

When to use What:

  • If you have few things that requires lot of operation lot of little functions applied to it then FP is good options. Functional programming works really well for high performance and processors as you can run it on multiple processors simultaneously.
  • If you have too many things like characters in game and few operation then OOP is good choice

Top comments (3)

Collapse
 
redbar0n profile image
Magne

"FP is declarative it focuses on what need to be done while OOP is imperative it focuses on how the things should be done"

Interesting. I would guess you could also say it was the other way around. Would you care to elaborate on your point?

Collapse
 
zorlac profile image
zorlac

You can use OO and FP at different granularity. Use OO modeling to find the right places in your application to put boundaries. Use FP techniques within those boundaries

Collapse
 
jzombie profile image
jzombie • Edited

I like this explanation.

React has errror boundaries which work this way. Do you happen to know of any other exanples of OO boundaries?