JavaScript the Fun Part


functional-programming-javascript

declarative-API-imperative-API


Using OOP style, we should think about two things.

  1. Implementation details
  2. An API to work with this implementation

Here is an example. We have to write methods to work with our data. This data is encapsulated in our class.

const log = console.log.bind( console );

class People {
    constructor( list = [] ){
        this.list = list;
    }

    add( name ){
        this.list.push( name );
        return name;
    }

    print(){
        let index = 0;
        const maxIndex = this.list.length;
        for( ; index < maxIndex; ++index ){
            console.log( index + 1, this.list[ index ] );
        }
    }
};

const p = new People;
p.add( "person 1" );
p.add( "person 2" );
p.print();

/* output
1 'person 1'
2 'person 2'
*/

More task we have, more methods we need to turn our data to the result we want. So after a while if we do not care about designing of class, it becomes a God Class.

So at that point, learning Design Pattern comes to the play.

Imperative

This is imperative. Here our focus is on how to do or how to print. So we have to think about

    let index = 0;
    const maxIndex = this.list.length;
    for( ; index < maxIndex; ++index ){
        console.log( index + 1, this.list[ index ] );
    }

Also bug tracking, because we wrote this code, right?

Declarative

And this part of our code is declarative.

const p = new People;
p.add( "person 1" );
p.add( "person 2" );
p.print();

Here we do not care about how to do. We care about what to do or what to print. So our focus is not on details, but on steps we need to proceed.

Here is the steps

  1. create new instance of People class
  2. add into it two times
  3. print what you added

DOM imperative API and JSX declarative API

Here is another example of imperative API using native DOM in web browsers.

const h1 = document.createElement( "h1" );
h1.textContent = "This is h1 tag";

We created an h1 element and then added "This is h1 tag" to it.

Here is the same but using JSX in React.js.

const h1 = <h1>This is h1 tag</h1>

It does not seem to be a big deal at first, but when we have complex code, it will be a big deal to work with imperative style; specially when we want to be more productive.

FP declarative API

Functions in the functional programming world are not arbitrary functions that some developers liked to create and then others should use them.

They are based on already proven mathematical theories that ensures us not to worry about correctness of these function nor worry about implementation details.

FP is not against OOP

Emphasizing on FP does not mean OOP is bed, is dead, etc; but a different approach to tackle our problems.

Making our People class simpler and easier to maintain by removing the print() method and using Ramda to print the list.

const R = require( "ramda" );

const log = console.log.bind( console );

class People {
    constructor( list = [] ){
        this.list = list;
    }

    add( name ){
        this.list.push( name );
        return name;
    }
};

const p = new People;

// data should be added
const list = [ "person 1", "person 2", "person 3" ];

// extract add from People with fixed this binding
const add = p.add.bind( p );

// map index with map
const mappedIndex = R.addIndex( R.map );

const printter = ( person, index ) => log( index + 1, person );
// new print
const print = mappedIndex( printter );

R.pipe(
    R.map( add ),
    print
)( list );

/* output
1 'person 1'
2 'person 2'
3 'person 3'
*/

// just for sure
log( p.list );  // [ 'person 1', 'person 2', 'person 3' ]

Is functional programming good for everything? There is no bad part about it?

We will discuss issues with FP, specially the learning part.


Update: Tue Oct 22 2019 08:36:57 GMT+0330 (Iran Standard Time)