DEV Community

Functional Programming Principles in Javascript

TK on November 25, 2018

After a long time learning and working with object-oriented programming, I took a step back to think about system complexity. “Complexity is an...
Collapse
 
lildvlpr profile image
Nestor Zepeda

This is one of the better posts I've seen on here so far. Thank you so much for this! Lots of useful resources and very well written and explained examples.

Collapse
 
teekay profile image
TK

Thank you! I'm glad you liked!
I hope I could help you in any way!

Collapse
 
johnboy5358 profile image
John • Edited

Hi TK,
I really like the fp style in JS, but how can I (or you) justify it, if, when I refer to your last shoppingCart example...

function imperativeGetTotalAmount(shoppingCart) {
  let amnt = 0
  for(let o of shoppingCart) amnt += o.type==='books' && o.amount
  return amnt
}

console.log(imperativeGetTotalAmount(shoppingCart))
// => 70

imperativeGetTotalAmount, also gives me the correct value and will be much quicker to execute, particularly when the "shoppingCart" array length is length 10,000 or greater? Additionally, the code length of imperativeGetTotalAmount is shorter.

Once again, I must reiterate, I am a huge fp fan and I am playing devil's advocate here in posing this question, but I feel that one must be able to defend a particular style,(oop, imperative, fp), if it is to be accepted by the community in general.

Thanks for your post and it's huge list of useful resources.

  • STOP PRESS ...

This solution returns an amazingly fast execution time for 100,000 generated items of approx. 2.5ms


function getTotalAmount(shoppingCart) {
  return shoppingCart.reduce((acc, obj) => {
    return obj.type === 'books'
    ? acc + obj.amount
    : acc
  },0)
}

or, alternatively ...


const getTotalAmount = (shoppingCart) =>
  shoppingCart.reduce((acc, obj) =>
    obj.type === 'books'
    ? acc + obj.amount
    : acc, 0)

visit runkit link

Collapse
 
maple3142 profile image
maple • Edited

I thought caculateArea is a pure function.Am I understand wrongly?

function calculateArea(radius) {
  return radius * radius * PI;
}

It will return the same value if you call it with same variable, because PI is a constant.
If you use replace PI with 3.14159 or Math.PI, it should still be a pure function.

Collapse
 
teekay profile image
TK

Yes, Maple, maybe my example was a bit confusing. My attempt was to show that the "constant" PI (an external variable) could change (in my example, I changed it to 42).

If the PI value changes, our calculateArea function will change the output for the same input (radius). The whole idea is to show that the function to be pure, it needs to not change the output, for the same input.

I will try give another example with a variable instead of a constant.

let tax = 20;

const totalPriceWithTax = (productPrice) => (productPrice * (tax / 100)) + productPrice;

For the input 100, we will have 120 as a result. But if our tax changes, our output will change, for the same input (100).

totalPriceWithTax(100); // 120
totalPriceWithTax(100); // 120
tax = 100
totalPriceWithTax(100); // 200

To make our function pure, we can pass the tax variable to the function as a parameter

const totalPriceWithTax = (productPrice, tax) => (productPrice * (tax / 100)) + productPrice;

For the inputs 100 and 20, it will always be 120

totalPriceWithTax(100, 20); // 120
totalPriceWithTax(100, 20); // 120
// ...

For the inputs 100 and 100, it will always be 200

totalPriceWithTax(100, 100); // 200
totalPriceWithTax(100, 100); // 200
// ...

With this example it is a bit less confusing I think.

Thanks for the feedback!

Collapse
 
calebarapp profile image
calebarapp

This is gold, fantastic! I'm a new programmer trying to wrap my head around functional programming and this has been extremely helpful!

Collapse
 
meysamsalehi profile image
Meysam Salehi

This is Great post! thank you so much.

Collapse
 
nverinaud profile image
Nicolas Verinaud • Edited

Great post ! I strongly recommend "JavaScript Allongé" to learn functional programming in JS : leanpub.com/javascriptallongesix !

Collapse
 
teekay profile image
TK

Awesome resource, thanks for sharing!

Collapse
 
shaibuzach profile image
Shaibu Zachariyya

Great article. Thank you

Collapse
 
wparad profile image
Warren Parad

I'm a little concerned to find this is still a "new concept" in 2018. SOLID, SRP, separation of concerns, functions without side-effects, please use these.

Some comments have been hidden by the post's author - find out more