Functional Programming in Javascript

Functional programming is new buzz word these which you might be hearing very frequently. I have been myself trying to explore what is functional programming exactly and what it has to do with Javascript. I have come to following conclusions:

Functional programming is style of writing code in which you use function as primary data structures.

Functional programming involves writing code that does not change state.

Functional programming involves writing immutable data structures.

Functional programming is not new. It has been there since javascript. It just that no one took javascript too seriously until Angular, React came along.

Non-Functional Example :

Functional Example:

Imperative vs Object Oriented vs Functional:

Imperative : An imperative style uses a sequence of statements to determine how to reach a certain goal. These statements are said to change the state of the program as each one is executed in turn. Basically your goal is to develop working code as quickly as possible.

In the example below functions are modifying input value. One variable is declared global. Value of global variable is changed from a function. Function capWords could be further break down into smaller functions.

Object Oriented:

Object-oriented programming (OOP) is a programming paradigm based on the concept of “objects”, which are data structures that contain data, in the form of fields, often known as attributes; and code, in the form of procedures, often known as methods.

Object-oriented is good when you have a fixed set of operations on things, and as your code evolves, you primarily add new things. This can be accomplished by adding new classes which implement existing methods, and the existing classes are left alone.

In the example above, the constructor function simulates a class to model the object. Methods live on the new object’s prototype to keep memory use low. capifyWords is achieved via prototype method. Though this is cleaner than imperative but there are some disadvantages: The methods in the constructor function rely on variables that are scoped to the parent object. There’s a looping construct for iterating across all the members of the array of strings. There’s a countervariable that serves no purpose other than to increment the progress through the for loop. And there are methods that produce the side effect of modifying variables that exist outside of their own definitions. All of this makes the code more brittle, less portable, and makes it harder to test the methods outside of this narrow context.

Functional :

Functional programming is a programming paradigm, a style of building the structure and elements of computer programs, that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data.(This is from wikipedia)

Functional languages are good when you have a fixed set of things, and as your code evolves, you primarily add new operations on existing things. This can be accomplished by adding new functions which compute with existing data types, and the existing functions are left alone.

Both capify and processWords functions are pure, meaning that they don’t rely on the state of the code they’re called from. The functions don’t create side effects that alter variables outside of themselves. There is one and only one result a function returns for any given set of arguments. Because of these improvements, the new functions are very easy to test, and could be snipped right out of this code and used elsewhere without any modifications.

Map and Reduce:

Map and reduce are two important methods which are more commonly used with functional programming.

Map:

The map() method creates a new array with the results of calling a provided function on every element in this array.map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results. callback is invoked only for indexes of the array which have assigned values, including undefined. It is not called for missing elements of the array (that is, indexes that have never been set, which have been deleted or which have never been assigned a value).

The reduce() method applies a function against an accumulator and each value of the array (from left-to-right) to reduce it to a single value.

reduce executes the callback function once for each element present in the array, excluding holes in the array, receiving four arguments:

accumulator

currentValue

currentIndex

array

The first time the callback is called, accumulator and currentValue can be one of two values. If initialValue is provided in the call to reduce, then accumulator will be equal to initialValue and currentValue will be equal to the first value in the array. If no initialValue was provided, then accumulator will be equal to the first value in the array and currentValue will be equal to the second.

Filter:

The filter() method creates a new array with all elements that pass the test implemented by the provided function.filter() calls a provided callback function once for each element in an array, and constructs a new array of all the values for which callback returns a value that coerces to true.

Pure Functions:

The function always evaluates the same result value given the same argument value(s). The function result value cannot depend on any hidden information or state that may change while program execution proceeds or between different executions of the program, nor can it depend on any external input from I/O devices (usually—see below).

Evaluation of the result does not cause any semantically observable side effect or output, such as mutation of mutable objects or output to I/O devices (usually—see below).