Procedural programming typically involves your code executing at the top of your script and going in order, statement by statement, to the bottom. Functional programming, however, centers more around the idea of the programming describing what should be done to an input and less around the order in which that should occur.
To better understand these concepts, let’s build a function that gets a property from an object and see how the Imperative (Procedural) and Declarative (Functional) approaches differ.
First, some input and a call to our method.
Example 1: Imperative (Procedural) Approach: Lot of code 🙁
Example 2: Declarative (Functional) Approach: Short and Simple 🙂
In the first example, we are using a procedural programming approach. With this approach, we first split the input into an array that we can then iterate over. By using control structures built into the language – a for loop – we very precisely control the program execution. We loop over each item in the array and one by one manually access each subsequent nested object. This is fine, and it works, but there’s a better way.
In the second example, we achieve the same results but never define the control structure. We don’t loop over an array of input values. Instead, we use a method on the Array prototype called reduce. Since this method is defined on the prototype, it is available to all instances of that type; in other words, it’s built into the language.
Array.prototype.reduce(): The reduce method is an example of a functional approach. 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. (Source: From Mozilla Developer Network).
Have you heard of Map/Reduce in Hadoop/Spark/etc.? It’s a similar concept. Using Array.prototype.reduce(), you can loop (“map”) over a collection (Array) of data and Reduce it to a single value.
This particular case may seem trivial, but in more complicated situations it is extremely useful. Using a functional approach often in more concise, readable code. I’m not advocating always taking the functional approach. There is a time and place for everything. However, if you know that this feature exists, you will certainly find it more useful for certain types of operations.
Every JS function has a prototype property. You attach properties and methods to this property to implement inheritance. This is called prototypical inheritance. This is why JS is so different (at least from what I was used to). For example, there are no classes in JS [ok ok, ES6+ has classes… but shhh 🙂 ]. But we can create an instance of a function.
When you set something on the prototype, every instance of that function also has the prototype. Prototypes let you define shared behavior. This is polymorphism. We also get inheritance. Lets look at an example:
- Declarative means describing what should be done but not describing the steps to do it. Declarative programming is like a picture but Imperative programming is like instructions for painting a picture.