Introduction to Functional Programming

#javascript #functional #react

Sayuri Feb 24 ・2 min read

In Functional Programing, we want express our whole program in terms of functions.
Functional Programing is Declarative. Which means we focus more on ** what to do ** instead of How to do

First lets understand why Functional Programming is so important.
Functional Programming enables us to

Write re-useable code.
Debug easily.
Read better.

Functions are 1st Class Citizens
because functions can be :

Assigned to variables.
Can be added to objects and arrays as well .
Sent to other functions as a argument.
Can be Returned from other functions.

Let's get right into it.

Non Functional Way

let name = "Sayuri" ;
let message = "Hey, fellow devs, I am " ;
console.log(message + name)

---> Hey, fellow devs, I am Sayuri

Functional Way

function message(name) {
    return "Hey, fellow devs, I am " + name ;
}

message("Sayuri")

---> Hey, fellow devs, I am Sayuri

--> Pure Functions

A Pure Function is a function which,
Given the same input, will always return the same output.

A Pure Function :

Takes in at least 1 parameter.
Return Something (A value or a function).
Does not mutates any arguments.

Not Pure

let name = "Sayuri" ;

function message(){
    console.log("Hey, fellow devs, I am " + name )
}

The above code is not pure because

--> It is not taking name as an parameter.
--> It's dealing with something in the global scope.
--> Also it not having a return value.

Pure Functions have no side effects which means it cannot alter anything outside the function.

Pure Function

function message(name) {
   return "Hey, fellow devs, I am " + name
}

Higher Order Function

A higher order function is a function that takes a function as an argument, or returns a function or does both.

const greet = function takeName (name){
    return function message(msg){
        return msg  + name 
    }
}

greet("Sayuri ")("Hey, fellow devs, I am ")

--> Hey, fellow devs, I am Sayuri

Immutable Code

Immutability means can't be changed.

Mutation --> (Bad)

const code= [ "Javascript", "Python", "React" ]
code[ 2 ] = "Node"
console.log(code)

--> [ "Javascript", "Node", "React" ]

Immutation

const code = [ "Javascript", "Python", "React" ]
const code2 = code.map(lang=> {
  if(lang=== 'Python') {
    lang= 'Node';
  }
  return lang;
});

console.log(code2)

--> [ "Javascript", "Node", "React" ]

Last but not the Least
Do not Iterate using for or while/loops --> Use Map, Reduce, Filter etc.

Let me your thoughts.

Discussion (12)

△ LUKE知る • Feb 24 • Edited

Hi Sayuri! 3 things worth mentioning:

In dev.to you can get syntax highlight in your code by doing triple back-tick followed by the language name, for example '''javascript (change the ' with back-ticks).
In JavaScript we have arrow functions, which make FP a breeze. Taking your HOC example as a base:

const greet = name => msg => `${msg}${name}`;

greet("Sayuri ")("Hey, fellow devs, I am "); // "Hey, fellow devs, I am Sayuri"

~~The immutation example can be achieved with Array.prototype.slice instead of Array.prototype.map, which avoids looping over the entire array to change a single value:~~

const code = ["Javascript", "Python", "React"];
const findAndReplace = value => replacement => source => {
  const index = source.indexOf(value);
  return index >= 0
    ? [
        ...source.slice(0, index),
        replacement,
        ...source.slice(index + 1)
      ]
    : source;
};
const replacePythonWithNode = findAndReplace("Python")("Node");

console.log(replacePythonWithNode(code)); // [ "Javascript", "Node", "React" ]

EDIT: The performance of this last approach is kinda the same as map. If your concern is about performance, then this is quite better:

const code = ["Javascript", "Python", "React"];
const findAndReplace = value => replacement => source => {
  const index = source .indexOf(value);
  return index >= 0
    ? Object.assign([...source], { [index]: replacement })
    : source;
};
const replacePythonWithNode = findAndReplace("Python")("Node");

console.log(replacePythonWithNode(code)); // [ "Javascript", "Node", "React" ]

Thanks Lukáš Zahradník for poiting that out :D

Lukáš Zahradník • Feb 24

The immutation example can be achieved with Array.prototype.slice instead of Array.prototype.map, which avoids looping over the entire array to change a single value:

Well the author is looping over the array only once, but you loop over it once as well because of indexOf and then you slice and spread whole array which you can count as looping over the whole array as well (?). Looks like your way is worse to do it.

△ LUKE知る • Feb 24 • Edited

Not quite...

Array.prototype.indexOf stops once the index is found, Array.prototype.map goes over the entire array. In the ideal scenario is in the index 0 and stops, in the worst scenario is the same as map.
Array.prototype.slice doesn't loop over the array, is far more performant than that.
If you don't like to use Array.prototype.slice, you can also use Object.assign like this:

const code = ["Javascript", "Python", "React"];
const findAndReplace = value => replacement => source => {
  const index = source .indexOf(value);
  return index >= 0
    ? Object.assign([...source], { [index]: replacement })
    : source;
};
const replacePythonWithNode = findAndReplace("Python")("Node");

console.log(replacePythonWithNode(code)); // [ "Javascript", "Node", "React" ]

My main point with why you quoted is that the idea with Array.prototype.map is to map over all the values in an array. To change a single value there are better approaches without looping over the entire array.

Lukáš Zahradník • Feb 24

Is that really a valid point? Both indexOf and map in those cases are O(n). Sure, slice doesn't "loop" over an array, but it creates new copy which is again O(n) operation, same for spread.

Your new version looks better, if there wasn't missing indexOf ofc.

Also, question is if it should replace all items with the value or just one.

△ LUKE知る • Feb 24 • Edited

You're right, I checked and the performance of my first approach in some scenarios is better, and in some others is the same or even worse. The second one is faster to both map and indexOf+slice. Still my main concern as I expressed previously is using a function meant to map all the elements of an array to just change the value of 1. I didn't checked the actual performance of this and it was kinda surprising, so thanks for pointing that out :D

Lukáš Zahradník • Feb 24

Agree, I don't find using map for it to be the best and cleanest (kinda misuse of map to be fair). Your second solution is probably the way to go. I don't know if there are better approaches.

Sometimes it's hard to speculate about performance, because spread, spread and indexOf is probably optimized a lot.

Casper • Feb 24

let name = "Sayuri" ;
let message = "Hey, fellow devs, I am " ;
console.log(message + name)

Do you consider this non-functional because it's all written in the global scope? Because I don't really see anything else that would make it non-functional. It doesn't mutate and doesn't access variables in an outer scope (since there is none). I would say it's completely functional.

function greet(){
    let name = "Sayuri" ;
    let message = "Hey, fellow devs, I am " ;
    console.log(message + name)
}

Is this still non-functional? Impure functions are still allowed in functional programming btw. But should be kept to a minimum.

A pure function also doesn't have to take an argument. Although if it doesn't it's just a constant function, always returning the same value. But by definition, it is still pure.

Jack • Mar 1

Agreed. I can only assume that first example because it's logging to the console (side effect).

Yes there can be minimal impure functions because otherwise your code would do nothing. But I'd say if a function is impure, you should look for a way to make it pure, and only leave it impure as a last resort, most of the time function composition/partial application is the key.

Your greet function I would pass the console in as a parameter. Even better would be to create an abstraction over logging to the console so your function isn't coupled to the console implementation!