convert javascript es6 class to functional programming style

Question

I have a class that wrote in reactjs, but would like to convert to function using functional programming and not OOP. Anybody tell me how? Follow my class.

import * as h from './hydraulic';

export default class verticalfloculator_diag {
  constructor (width, length, depth, npantalla, espaciamiento, espesor, pasos) {
    this.detention_time = 0;
    this.ancho = width
    this.largo = length
    this.profundidad = depth
    this.npantalla = npantalla
    this.espaciamiento_pantallas = espaciamiento
    this.espesor_pantallas = espesor
    this.alto_pasos = pasos
    this.area_entrepantallas = this.espaciamiento_pantallas * this.ancho
    this.volumen = this.ancho * this.profundidad * this.largo
    this.radiohidraulico = h.radio_hydraulico(this.area_entrepantallas, 2 * (this.ancho + this.espaciamiento_pantallas))
    this.anchohueco = 0.3
    this.altohueco = 0.2
  }


  Q = (q) => h.q_m3s(q);
  tiempo = (q) => this.volumen / this.Q(q);  // en m3
  velocidad_canales = (q) => h.velocity(this.Q(q), (this.area_entrepantallas));
  velocidad_pasos = (q) => h.velocity(this.Q(q), (this.alto_pasos * this.ancho));
  velocidad_huecos = (q) => h.velocity(this.Q(q), (this.altohueco * this.anchohueco));
  perdidascanales = (q) => h.perdidas_canales(0.013, this.velocidad_canales(this.Q(q)), this.radiohidraulico);
  perdidasenvueltas = (q) => ((this.npantalla + 1) * Math.pow (this.velocidad_canales(q),2) + (this.npantalla) * Math.pow(this.velocidad_pasos(q),2))/2/9.81
  perdidasenhuecos = (q) => Math.pow(this.velocidad_huecos(q),2)/2/9.81
  perdidastotales = (q) => this.perdidascanales(q) + this.perdidasenvueltas(q) + this.perdidasenhuecos(q)

}

What exactly makes you think that your current code is not functional? — Bergi
– Bergi, Commented Sep 22, 2017 at 0:00
He doesn't mean he wants it to be "functional", he wants to use the "functional programming style" instead of the "object-oriented style". — Duncan Thacker
– Duncan Thacker, Commented Sep 22, 2017 at 0:01
Why do you want to avoid objects? (Which is quite impossible in JS anyway). They're the best solution for complex structures like yours. Your current solution has immutable data, that's all what is needed. — Bergi
– Bergi, Commented Sep 22, 2017 at 0:01
@DuncanThacker That's one way to understand the question, but I'm not so sure there if method/function invocation syntax is all he wants to change. — Bergi
– Bergi, Commented Sep 22, 2017 at 0:04
@AlejandroA.E.Díaz I agree with Bergi that you already have a "functional" program – "avoid the use of objects" isn't a thing; if you've heard someone say that functional programs don't (or can't) use objects, they're wrong, and grossly misunderstand functional programming — Mulan
– Mulan, Commented Sep 22, 2017 at 20:29

Duncan Thacker · Accepted Answer · 2017-09-22 00:16:49Z

5

An alternate approach is to make a "pure data" flocculator object:

const myFlocculator = {
    volumen: 10,
    ancho: 50
    //etc
};

and pass it into each function, which separates your data model from your business logic in a nice FP style:

export const tiempo = (floculator, q) => floculator.volumen / Q(q);

which you call like this:

const t = tiempo( myFlocculator, q );

So now you can create any number of functions which understand how to work with flocculator data, without binding them up in a class. If you want you can even have a constructor-like function:

function createFloculator( width, length, depth, npantalla, espaciamiento, espesor, pasos) {
   return {
      ancho: width,
      large: length, 
      //etc
   };
}

answered Sep 22, 2017 at 0:16

Duncan Thacker

5,1891 gold badge12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alejandro A. E. Díaz Over a year ago

Perfect. I like this way.

Duncan Thacker Over a year ago

Glad to hear it! My programming education was mostly OOP (C++, Java) so it took a while to adjust to structuring things without classes, but generally prefer FP style now (and ReactJS makes it much easier to achieve).

skylize Over a year ago

"Now I do not need to repeat the this. all the time and can assign results of functions to values that can use in another functions". Haha! Another convert. :D

Mulan Over a year ago

Don’t hand-wave phrases like ”pure data objects”; that’s not a real thing – there’s nothing wrong with having functions as data members in the objects too – functions can also be data

Duncan Thacker · Accepted Answer · 2017-09-21 23:50:41Z

1

The easiest way is to just export the individual functions directly by name, and give them more parameters to replace the stored ones from the class. E.g.

export const Q = q => h.q_m3s(q); // or possibly even just Q = h.q_m3s
export const tiempo = (q, volumen) => volumen / Q(q);

answered Sep 21, 2017 at 23:50

Duncan Thacker

5,1891 gold badge12 silver badges24 bronze badges

4 Comments

Alejandro A. E. Díaz Over a year ago

Thank you Now I understand better. But how do I group those individual functions?

Duncan Thacker Over a year ago

You don't need to group them besides putting them in their own file, really. In javascript you can just have functions and export/import them on their own; this is more in line with functional style and lets you avoid lots of boilerplate.

Alejandro A. E. Díaz Over a year ago

I am starting to see the benefits. But have still doubts. Class Flocculator has fixed physical values. We create one flocculator and want to check for it functions (parameters) changing the value of flow q.

Duncan Thacker Over a year ago

Let me add another answer with another approach.

Ben Hart · Accepted Answer · 2018-01-29 14:36:49Z

0

You could implement redux and react-redux packages and use stateless functional components.

redux allows you to inject all your state and methods as props, so the only way you would need a full class component would be for a lifecycle method.

answered Jan 29, 2018 at 14:36

Ben Hart

16710 bronze badges

Collectives™ on Stack Overflow

convert javascript es6 class to functional programming style

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related