I'm trying to wrap my head around some Functional Programming basics.
So, by using a higher order function I can create a counter that can increment:
function counter( start ) {
var count = start;
return function() {
return ++count;
}
}
var myCounter = counter( 2 );
myCounter();
myCounter();
However, what would be the correct (in terms of Functional Programming) way of implementing a bi-directional counter? I came up with the following, but it seems too much like a cheap object for me:
function bicounter( start ) {
var count = start;
var mutate = function(amount) {
return function() { count += amount; }
};
return {
increment: mutate(1),
decrement: mutate(-1)
}
}
var myCounter = bicounter( 2 );
myCounter.increment();
myCounter.decrement();
Functional programming quite literally means “programming with functions”. Here, we are talking about a mathematical function and not a subroutine. What's the difference?
This is a function (the Ackermann function):
A mathematical function is pure (i.e. it has no side effects). A mathematical function does only one thing: it maps an input value to an output value. It doesn't change the value of any variable.
This is a subroutine which computes the result of the Ackermann function:
function A(m, n) {
var stack = [], exit;
do {
if (m > 0) {
m = m - 1;
while (n > 0) {
stack.push(m);
n = n - 1;
}
n = 1;
} else {
m = stack.pop();
n = n + 1;
}
} while (m !== exit);
return n;
}
A subroutine may or may not be pure. For example, the above subroutine is impure because it modifies the variables m, n and stack. Thus, although it computes the result of the Ackermann function which is a mathematical function, yet it's not a mathematical function.
Now, consider your counter function:
function counter(count) {
return function () {
return ++count;
};
}
var countup = counter(0);
alert(countup()); // 1
alert(countup()); // 2
alert(countup()); // 3
Is this functional programming? The short answer is, it's debatable because you are indeed using higher-order functions. However, your counter function isn't a mathematical function. Hence, in the strict definition of functional programming (i.e. programming with mathematical functions) your program isn't really functional.
Note: I think most of the confusion arises because in JavaScript first-class subroutines are called functions. Indeed, they can be used as functions. However, they are not mathematical functions.
Actually, your program is object-oriented. Every time you call counter you are creating a new abstract data type representing a counter object. Since this object has only one operation defined over it, you can get away with returning that operation itself from the counter function. Hence, your intuition is absolutely correct. This is not functional programming. It's object-oriented programming.
So how would you implement a counter using functional programming?
In functional programming, everything can be defined as a function. That's strange. What about numbers? Well, numbers can be defined as functions too. Everything can be defined as a function.
However, to make things simpler let's assume that we have some primitive data types like Number and that we can define new data types using structural typing. For example, any object that has the structure { count: Number } (i.e. any object with a single property named count which is of the type Number) is a value of the type Counter. For example, consider:
var counter = { count: 5 }; // counter :: Counter
The typing judgement counter :: Counter reads as “counter is a value of the type Counter”.
However, it's usually better to write a constructor to construct new data structures:
// Counter :: Number -> Counter
function Counter(count) {
return { count: count };
}
var counter = Counter(5); // counter :: Counter
Note that the value Counter (which is a function of the type Number -> Counter, read as “Number to Counter”) is different from the type Counter (which is a data structure of the form { count: Number }). Types and values can have the same name. We know that they're different.
Now, let's write a function that returns the value of a counter:
// count :: Counter -> Number
function count(counter) {
return counter.count;
}
It's not very interesting. However, that's because the Counter data type itself is not very interesting. In fact, the Number data type and the Counter data type are isomorphic (i.e. we can convert any number n into an equivalent counter c using the function Counter and we can convert the counter c back into the number n using the function count, and vice versa).
Hence, we could have avoided defining a Counter data type and used a Number itself as a counter. However, for pedagogical purposes let's use a separate data type for Counter.
So, now we want to update the value of counter using a function named increment. Hold on. Functions can't change the values of variables in functional programming. How do we update the value of counter? Well, we can't update the value of counter. However, we can return a new counter with an updated value. This is exactly what we do in functional programming:
// increment :: Counter -> Counter
function increment(counter) {
return Counter(count(counter) + 1);
}
Similarly, we can define the decrement function:
// decrement :: Counter -> Counter
function decrement(counter) {
return Counter(count(counter) - 1);
}
Notice that if we had used a Number as a Counter then the increment and decrement operations for a counter c would be defined as c + 1 and c - 1 respectively. That further strengthens our understanding that a counter is just a number.
That's all dandy but what's the point of functional programming?
Currently, it seems as though functional programming is more difficult than normal programming. After all, sometimes you really need to mutation to write interesting programs. For example, can you do this easily using functional programming?
function bicounter(count) {
return {
increment: update(+1),
decrement: update(-1)
};
function update(amount) {
return function () {
return count += amount;
};
}
}
var counter = bicounter(0);
alert(counter.increment()); // 1
alert(counter.decrement()); // 0
Actually, yes you can do that using the State monad. I'll switch to Haskell for want of a better functional programming language than JavaScript:
import Control.Monad.State
type Counter = Int
counter :: Counter
counter = 0
increment = modify (+1)
decrement = modify (subtract 1)
alert = get >>= (liftIO . print)
program = do
increment
alert
decrement
alert
main = evalStateT program counter
This is a runnable Haskell program. Quite succinct isn't it? This is the power of functional programming. If you're sold on the idea of functional programming then you should definitely consider learning Haskell.
Related
I'm trying to wrap my head around the return statement but I can't see a reason why I should use one. My code works just fine without using one...
In both examples my console prints out 10 not matter if I use return or not.
Without return:
var sum = 5;
function myFunction() {
sum += 5;
}
myFunction();
console.log(sum);
With return:
var sum = 5;
function myFunction() {
return sum += 5;
}
myFunction();
console.log(sum);
By default, functions return the value undefined. If you want the function to return some other value, you need to have a return statement.
You may also use a return statement to halt execution of the function based on some logic, again returning a value that has some meaning or just undefined.
In the first example in the OP, the function is called and the return value is not used for anything, so it doesn't matter what the return value is and a return statement isn't necessary.
In another scenario, the return value might be important, e.g. a function that generates an integer random number between 0 and 10:
function getRandomInteger(){
return Math.floor(Math.random() * 11);
}
function showRandomNumber() {
document.getElementById('s0').textContent = getRandomInteger();
}
<button onclick="showRandomNumber()">Show random number</button>
<span id="s0"></span>
In the above, the getRandomInteger function needs to return a specific value, so it uses a return statement. The showRandomNumber function just displays the random number, so it doesn't need a return statement as the caller (the listener on the button) doesn't care what the return value is.
Here is what is happening with your example:
var sum = 5; //Sets the sum to =5
function myFunction() {
return sum += 5; // += reassigns the global (sum) to 10
}
myFunction();
console.log(sum);
A better example would be this:
sum = 5;
function myFunction() {
var sumOther = sum + 5;
return sumOther;
}
console.log(“sum:” + sum); // 5
console.log(“myFunction:” + myFunction()); // 10
This is how you would get the run of the function and not the global variable ‘sum’
This is because you use (global) variable declared outside the function (function modify it directly so there is no need to return value). However it is not good way of write functions because they are less reusable because they need proper global context to be used. Better is to use something like this:
function myFunction(num) {
return num += 5;
}
var sum = 5;
var result = myFunction(5) ;
console.log(result); // -> 10
this function can be easily used ind different context because it have parameter num and works only on it (function uses only values declared inside its declaration and body)
The trick in your case a is scope of a function. In both cases variable sum is defined in global scope. When you calling the function, it goes through the following steps:
Look whether var sum is defined in current step Since it not defined
inside the function, go one step over and take a look into outer
scope. Yes, it is defined here, start using it.
Perform calculation.
You are using incremental operator sum += 5 so actually it can be
written as sum = sum + 5. If you will look into second case,
you'll notice that variable have increased value now. And since that
variable is taken from global scope, your function just mutates it.
NOTE: At this point no matter whether you are returning something
from function or not. Your function just mutated outer variable.
The last step - exit from function. As I said earlier, return value
matters only if you want to use result of function call directly,
for instance: var result = myFunction()
Example 1
function makeCounter() {
let count = 0;
return function() {
return count++;
};
}
let counter = makeCounter();
alert( counter() );
alert( counter() );
Above alerts 0 and 1 respectively.
Example 2
function makeCounter() {
let count = 0;
return function() {
return count+1;
};
}
let counter = makeCounter();
alert( counter() );
alert( counter() );
This alerts 1 and 1 respectively
In programming count++ is equivalent to count+1 , then why is the difference in above two examples. I know its something related to closure property and hoisting. But understand perfectly. Could you guys help.
Note: Please let me know whether I should change the title of the question if it does not make sense.
The expression count++ evaluates count, adds 1, stores the result in count, but the overall result (the net value of count++) is the original value of count.
The expression count + 1 evaluates count, adds 1, and returns the result. The value of count is not changed.
Interestingly, while it's possible to mimic ++count (pre-increment) with an alternative expression
var inc = (count += 1);
there's really no way (I can think of) to mimic count++ cleanly without using a function, because there's no getting around the need for a temporary storage location:
var inc = () => { let tmp = count; count += 1; return tmp }();
The operator semantics of post-increment ++ dates from C in the 1970s and probably earlier, and has been copied by many other languages, including JavaScript. Folklore (as I remember it, being an old person) held that the pre- and post-increment operators were inspired by addressing modes available in the DEC PDP-11 instruction set, but that's always seemed fairly unlikely to me.
In your first example, you are post incrementing, i.e. adding 1 after the declaration and use. If you used ++count (pre incrementing) you would get 1 and 2 in your alerts.
In your second example, you do not store the value of count+1 back into count, so on the second time around, count is still 0 and you get the same result again.
I'm studying JavaScript from the book JavaScript: The Good Parts, in the memoization section there is an example about using memoize technique to do Fibonacci problem
We create a general function call memoizer, it takes an memo array and the fundamental function, returns a shell function that manages the memo and calls fundamental function
var memoizer = function(memo, fundamental) {
var shell = function(n) {
var result = memo[n];
if (typeof result !== 'number') {
result = fundamental(shell, n);
memo[n] = result;
}
return result;
};
return shell;
};
And then create fibonacci like this:
var fibonacci = memoizer([0, 1], function(shell, n) {
return shell(n-1) + shell(n-2);
});
If I run fibonacci(10), the result will be displayed exactly.
But the thing that makes me confused is the n parameter shell function in memoizer function. I know that it is the value that we want to compute. But where is it come from? How can I call fibonacci(10), for example, can pass the value 10 to n? And what is exactly the var fibonacci? Is it a function or points to a function object as memoizer?
Thanks for any help!
So, to understand this fully, you need to understand things below as fundamental pieces.
Closure How do JavaScript closures work?
Scope What is the scope of variables in JavaScript?
First class object What is meant by 'first class object'?
So, now look at the code.
var memoizer is assigned as a function that returns an another function inside.
var memoizer = function(memo, fundamental) {
var shell = function(n) {
... do some works ...
};
return shell;
};
Can you see it? var shell is returned at the end of the line in memoizer
And whatever the inner logic is in memoizer, the result of it is assigned to var fibonacci
var fibonacci = memoizer([0, 1], function(shell, n) {
return shell(n-1) + shell(n-2);
});
So, it means fibonacci equals the result of memoizer (Since we excuted it), and the result of memoizer equals shell function. If you read those links given to you by me well, you can understand what is going on behind the scenes.
By the way, the code you've given isn't the best way. Because anyway closure makes an activated object alive that isn't necessary.
This code below is an another way of making fibonacci, this isn't the absolute best way, however, I recommend you to compare this code with your code, and figure the differences out.
var result = [];
result[0] = 1;
result[1] = 1;
function fibonacci(n){
var i;
for(i = 2; i < n; i++){
if(!result[i]){
result[i] = result[i-1] + result[i-2];
}
}
return result[i-1];
}
console.log(fibonacci(10));
I have a dice-rolling bot that spits out results via var roll = new Roll('4#2d20+3'). That constructor makes objects with properties parsed out of the string argument, which resembles this:
aRoll = {
text: '4#2d20+3',
times: 4,
dice: 2,
sides: 20,
modifier: 3,
roll: function() {...}
}
The roll() method should use the object's properties to generate an array of results. This is an exercise to learn what's new in JavaScript, so I'm curious how best to accomplish this.
Old, procedural way:
this.roll = function() {
var total = 0;
for (var i=0; i < this.dice; i++) {
total += Math.floor(Math.random() * this.sides) + 1;
}
return total;
}
My attempt at new Array functional iteration:
this.roll = () => Array(this.dice).fill(0).reduce(state => {
result + Math.floor(Math.random() * state.sides) + 1;
}, this);
This sorta works, but Array(x).fill(0).reduce(... is an ugly hack, and passing this in as state seems like a sign I'm doing the wrong thing.
Is there an Array method I should use instead? Or is the for loop still the cleanest way to accomplish this?
One way to repeat a function n times is
Array.from(Array(n), fn)
To make all of this more readable, you could define, for example
let times = (n, fn) => Array.from(Array(n), fn);
let rand = n => Math.floor(Math.random() * n) + 1;
let sum = a => a.reduce((x, y) => x + y);
and then
roll = function() {
return sum(
times(this.dice,
rand.bind(0, this.sides)));
}
I think I figured out how this “should” be done.
The first issue is straightforward: do not use arrow functions as methods:
An arrow function does not create its own this context, so this has its original meaning from the enclosing context.
this is the whole point of object-orientation, so breaking it is a bad idea. Passing this as map()’s second argument was indeed a code smell.
The second issue: instead of abusing reduce()’s initial value parameter with this to fake a context object, use a closure:
function roll(sides) {
return (total) => {
total + Math.floor(Math.random() * sides) + 1;
};
}
someArray.map(roll(this.sides));
When you pass callbacks as arguments, but need to dynamically give them data that callers don’t provide, closures are the classic solution.
As for the third issue, populating an array the size of an object property, in order to call a function that many times…
There is no built-in boilerplate way. :•) #georg kindly provided a clean implementation of a times() function that reminds me of Ruby’s Number.times(), if you’re interested.
I'm trying to solve a puzzle, and am at my wit's end trying to figure it out.
I'm supposed to make a function that works like this:
add(1); //returns 1
add(1)(1); //returns 2
add(1)(1)(1); //returns 3
I know it can be done because other people have successfully completed the puzzle. I have tried several different ways to do it. This is my most recent attempt:
function add(n) {
//Return new add(n) on first call
if (!(this instanceof add)) {
return new add(n);
}
//Define calc function
var obj = this;
obj.calc = function(n) {
if (typeof n != "undefined") {
obj.sum += n;
return obj.calc;
}
return obj.sum;
}
//Constructor initializes sum and returns calc(n)
obj.sum = 0;
return obj.calc(n);
}
The idea is that on the first call, a new add(n) is initialized and calc(n) is run. If calc receives a parameter, it adds n to sum and returns itself. When it eventually doesn't receive a parameter, it returns the value of sum.
It makes sense in theory, but I can't get it to work. Any ideas?
--edit--
My code is just the route I chose to go. I'm not opposed to a different approach if anyone can think of one.
To answer "how dow this work". Given:
function add(n) {
function calc(x) {
return add(n + x);
}
calc.valueOf = function() {
return n;
}
return calc;
}
var sum = add(1)(2)(3); // 6
When add is called the first time, it stores the value passed in in a variable called n. It then returns the function calc, which has a closure to n and a special valueOf method (explained later).
This function is then called with a value of 2, so it calls add with the sum of n + x, wich is 1 + 2 which 3.
So a new version of calc is returned, this time with a closure to n with a value of 3.
This new calc is called with a value of 3, so it calls add with n + x, which this time is 3 + 3 which is 6
Again add returns a new calc with n set to 6. This last time, calc isn't called again. The returned value is assigned to the variable sum. All of the calc functions have a special valueOf method that replaces the standard one provided by Object.prototype. Normally valueOf would just return the function object, but in this case it will return the value of n.
Now sum can be used in expressions, and if its valueOf method is called it will return 6 (i.e. the value of n held in a closure).
This seems pretty cool, and sum will act a lot like a primitve number, but it's actually a function:
typeof sum == 'function';
So be careful with being strict about testing the type of things:
sum * 2 // 12
sum == 6 // true
sum === 6 // false -- oops!!
Here's a somewhat streamlined version of #RobG's great answer:
function add(n) {
function calc(x) { return n+=x, calc; }
calc.valueOf = function() { return n; };
return calc;
}
The minor difference is that here calc just updates n and then returns itself, rather than returning itself via another call to add, which puts another frame on the stack.
Making self-replication explicit
calc is thus a pure self-replicating function, returning itself. We can encapsulate the notion of "self replication" with the function
function self_replicate(fn) {
return function x() {
fn.apply(this, arguments);
return x;
};
}
Then add could be written in a possibly more self-documenting way as
function add(n) {
function update(x) { n += x; }
var calc = self_replicate(update);
calc.valueOf = function() { return n; };
return calc;
}
Parallel to Array#reduce
Note that there is a certain parallelity between this approach to repeatedly calling a function and Array#reduce. Both are reducing a list of things to a single value. In the case of Array#reduce the list is an array; in our case the list is parameters on repeated calls. Array#reduce defines a standard signature for reducer functions, namely
function(prev, cur)
where prev is the "accumulator" (value so far), cur is the new value being fed in, and the return value becomes the new value the accumulator. It seems useful to rewrite our implementation to make use of a function with that kind of signature:
function add(n) {
function reducer(prev, cur) { return prev + cur; }
function update(x) { n = reducer(n, x); }
var calc = self_replicate(update);
calc.valueOf = function() { return n; };
return calc;
}
Now we can create a more general way to create self-replication-based reducers based on a reducer function:
function make_repeatedly_callable_function(reducer) {
return function(n) {
function update(x) { n = reducer(n, x); }
var calc = self_replicate(update);
calc.valueOf = function() { return n; };
return calc;
};
}
Now we can create add as
var add = make_repeatedly_callable_function(function(prev, cur) { return prev + cur; });
add(1)(2);
Actually, Array#reduce calls the reducer function with third and fourth arguments, namely the index into the array and the array itself. The latter has no meaning here, but it's conceivable we might want something like the third argument to know what "iteration" we're on, which is easy enough to do by just keeping track using a variable i:
function reduce_by_calling_repeatedly(reducer) {
var i = 0;
return function(n) {
function update(x) { n = reducer( n, x, i++); }
var calc = self_replicate(update);
calc.valueOf = function() { return n; };
return calc;
};
}
Alternative approach: keeping track of values
There are certain advantages to keeping track of the intermediate parameters the function is being called with (using an array), and then doing the reduce at the end instead of as we go along. For instance, then we could do Array#reduceRight type things:
function reduce_right_by_calling_repeatedly(reducer, initialValue) {
var array_proto = Array.prototype,
push = array_proto.push,
reduceRight = array_proto.reduceRight;
return function(n) {
var stack=[],
calc = self_replicate(push.bind(stack));
calc.valueOf = reduceRight.bind(stack, reducer, initialValue);
return calc(n);
};
}
Non-primitive objects
Let's try using this approach to build ("extend") objects:
function extend_reducer(prev, cur) {
for (i in cur) {
prev[i] = cur[i];
}
return prev;
}
var extend = reduce_by_calling_repeatedly(extend_reducer);
extend({a: 1})({b: 2})
Unfortunately, this won't work because Object#toValue is invoked only when JS needs a primitive object. So in this case we need to call toValue explicitly:
extend({a: 1})({b: 2}).toValue()
Thanks for the tip on valueOf(). This is what works:
function add(n) {
var calc = function(x) {
return add(n + x);
}
calc.valueOf = function() {
return n;
}
return calc;
}
--edit--
Could you please explain how this works? Thanks!
I don't know if I know the correct vocabulary to describe exactly how it works, but I'll attempt to:
Example statement: add(1)(1)
When add(1) is called, a reference to calc is returned.
calc understands what n is because, in the "mind" of the interpreter, calc is a function child of add. When calc looks for n and doesn't find it locally, it searches up the scope chain and finds n.
So when calc(1) is called, it returns add(n + x). Remember, calc knows what n is, and x is simply the current argument (1). The addition is actually done inside of calc, so it returns add(2) at this point, which in turn returns another reference to calc.
Step 2 can repeats every time we have another argument (i.e. (x)).
When there aren't any arguments left, we are left with just a definition of calc. The last calc is never actually called, because you need a () to call a function. At this point, normally the interpreter would return a the function object of calc. But since I overrode calc.valueOf it runs that function instead.
When calc.valueOf runs, it finds the most recent instance of n in the scope chain, which is the cumulative value of all previous n's.
I hope that made some sense. I just saw #RobG 's explanation, which is admittedly much better than mine. Read that one if you're confused.
Here's a variation using bind:
var add = function _add(a, b) {
var boundAdd = _add.bind(null, a + b);
boundAdd.valueOf = function() {
return a + b;
}
return boundAdd;
}.bind(null, 0);
We're taking advantage of a feature of bind that lets us set default arguments on the function we're binding to. From the docs:
bind() also accepts leading default arguments to provide to the target
function when the bound function is called.
So, _add acts as a sort of master function which takes two parameters a and b. It returns a new function boundAdd which is created by binding the original _add function's a parameter to a + b; it also has an overridden valueOf function which returns a + b (the valueOf function was explained quite well in #RobG's answer).
To get the initial add function, we bind _add's a parameter to 0.
Then, when add(1) is called, a = 0 (from our initial bind call) and b = 1 (passed argument). It returns a new function where a = 1 (bound to a + b).
If we then call that function with (2), that will set b = 2 and it'll return a new function where a = 3.
If we then call that function with (3), that will set b = 3 and it'll return a new function where a = 6.
And so on until valueOf is called, at which point it'll return a + b. Which, after add(1)(2)(3), would be 3 + 3.
This is a very simple approach and it meets the criteria the OP was looking for. Namely, the function is passed an integer, keeps track of that integer, and returns itself as a function. If a parameter is not passed - the function returns the sum of the integers passed to it.
let intArray = [];
function add(int){
if(!int){
return intArray.reduce((prev, curr) => prev + curr)
}
intArray.push(int)
return add
}
If you call this like so:
console.log(add(1)(1)());
it outputs 2.