[Javascript] Functor Basic Intro

Posted 2020-08-07 Answer1215

Well, this stuff will be a little bit strange if you deal with it first time.

 

Container Object:

• 　　Just a wrapper / contianer for values
• 　　No Method
•       No Nouns

var _Container = function(val){
  this.val = val;
}

var Container = function(x){
  return new _Container(x);
}

console.log(Container(3)) // _Container( {val: 3})

Every time we use Container, it will just add the value to the Container object and assign value to prop val.

 

map function on Container:

This map is not the map what you think it is.... 

The map you think is the method on the Array.

Here the map is the one get into the Container, grep the value, then apply function on this value. The return value is still Container.

_Container.prototype.map = function(f){
  return Container(f(this.val))
}

var res = Container("flamethrower").map(function(s){ return _.capitalize(s) })
console.log(res) //_Container( {val: "Flamethrower"} )

So in the example, map function goes into the Container, get the value "flamethrower", and apply the function ‘_.capitialize‘ to the value and return the new value to the Container.

Or you can write like this:

var capitalize = _.capitalize;
var res = Container("flamethrower").map(capitalize);

 

More examples:

Container([1,2,3]).map(reverse).map(first)
//=> Container(3)


Container("flamethrower").map(length).map(add(1))
//=> Container(13)

 

So "Container"... what you feel about it? It is nothing... you don‘t need to care about it. Just every time you call map on it, the return value will still inside the Container, so that you can chain map on it.

 

Curry map:

Define a global map function, which use Ramda curry method:

var map = R.curry(function(f, obj) {
  return obj.map(f) 
})

Later we will pass Container as obj, and on our Container, we already defined map function, so we can use here as ‘obj.map‘.

So, again, here ‘obj.map‘ --> Means, goes into the obj, grep the value and apply function f.

 

So now what we can do:

Container(3).map(add(1)) // Container(4)

map(add(1), Container(3)) // Container(4), or map(add(1))(Container(3)), since map is curry method

More exmaples:

map(R.compose(R.head, R.reverse), Container("dog"))
//=> Container(“g”)

 

So all what we have seen so far, we give a name call "Functor".

 

Functor

“An object or data structure you can map over”

 function: map

 

// Exercise 1
// ==========
// Use _.add(x,y) and map(f,x) to make a function that increments a value inside a functor
console.log("--------Start exercise 1--------")
//map(): Go inside the object and run the function on the value of the object
//map(): Here map is curry function, so take the function as first arguement and object as second arguement.
//map(_.add(1), Identity(2)) --> Identity(3)
var ex1 = map(_.add(1));


assertDeepEqual(Identity(3), ex1(Identity(2)))
console.log("exercise 1...ok!")





// Exercise 2
// ==========
// Use _.head to get the first element of the list
var xs = Identity([‘do‘, ‘ray‘, ‘me‘, ‘fa‘, ‘so‘, ‘la‘, ‘ti‘, ‘do‘])
console.log("--------Start exercise 2--------")


var ex2 = map(_.head)


assertDeepEqual(Identity(‘do‘), ex2(xs))
console.log("exercise 2...ok!")