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...

Read full post

Nestor Zepeda • Nov 28 '18

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.

TK • Nov 28 '18

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

John • May 7 '19 • 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

maple • Dec 3 '18 • 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.

TK • Dec 3 '18

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!

calebarapp • Nov 29 '18

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

Meysam Salehi • Dec 1 '18

This is Great post! thank you so much.

Nicolas Verinaud • Nov 28 '18 • Edited

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

TK • Nov 28 '18

Awesome resource, thanks for sharing!

Shaibu Zachariyya • Nov 2 '19

Great article. Thank you

Warren Parad • Dec 29 '18

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