I am new to JavaScript and have several questions about functional programming.
Here is a statement:
outer(inner(5));
Is it possible to construct function outer in a way that allows it
to capture function inner and its argument 5?
Is it possible to construct function inner in a way that allows it to
pass itself and its argument 5 to function outer?
If the answer to both questions above is no, is it possible to
construct functions outer and inner in a way that allows the former
to capture function inner and its argument 5 or the
latter to pass itself and its argument 5 to function
outer?
I tried:
using the arguments object but to no avail.
function outer (parameter) {
return arguments;
}
function inner (n) {
return n + 1;
}
console.log(outer(inner(5))); // returns Arguments { 0: 6 ... }
using currying but I do not see how it can help me since I am not given the following statement:
outer()(5);
A possible workaround consists in returning an array from inner() composed of on one side the processing function and on the other side the argument.
outer will be able to access both by reading the array.
function outer(arr)
{
var fun = arr[ 0 ];
var arg = arr[ 1 ];
var result = fun(arg);
console.log('inner function is:', fun);
console.log('its argument is:', arg);
console.log('its result is:', result);
return result;
}
function inner(num)
{
return [
function (_num)
{
return _num + 1;
},
num
]
}
console.log(outer(inner(5)));
You could achieve this by letting your inner return a function (foo) which closes over n. You can then let foo return n+1. Then, within your outer function, you can invoke foo to get its return value:
const outer = f => f();
const inner = n => _ => n+1;
console.log(outer(inner(5)));
Alternatively, another possibility would involve changing your return value. You could return an array from inner which contains the original passed through arguments (...arguments) and the returned value (to_return) and then use destructuring assignment to get the passed in argument(s) (n & m) and the returned result:
function outer([result, n, m]) {
console.log("returned from inner: ", result);
console.log("arguments passed into inner: " + [n, m]);
return n;
}
function inner(n, m) {
let to_return = n + 1;
return [to_return, ...arguments];
}
console.log(outer(inner(5, 2))); // returns 5
Note: I added an m argument to demonstrate how you can extend this to multiple arguments
function outer(myFunction, argument) {
if (typeof myFunction !== "function") {
return false;
}
return myFunction(argument);
}
function inner(n) {
return n + 1;
}
console.log(outer(inner, 5));
Just a simple approach. Don’t execute the function inner but pass it as an argument (myFunction). And let the outer function execute it with the given argument.
Related
I came across this pattern in redux compose function. I still don't understand how in the example below the functions are evaluated starting from the last and not from the first:
function f2(a) {
return a + a;
}
function f3(a) {
return a + a + a;
}
function f4(a) {
return a + a + a + a;
}
function f5(a) {
return a + a + a + a + a;
}
function compose(...funcs) {
return funcs.reduce(function x(a, b) {
return function y(...args) {
const temp = a(b(...args));
return temp;
};
});
}
const composedFunction = compose(f2, f3, f4, f5);
const result = composedFunction(2);
In the first reduce iteration the accumulator is f2 so we'll get f2(f3(2))=12. In the next iteration we'll call f4(12)=48. In the last iteration we'll call f5(48)=240. So the evaluation order is f5(f4(f2(f3(2)))). But using console.log I see that the evaluation order is f2(f3(f4(f5(2)))) which is also 240 by coincidence.
As far as I understand the function y is called for all array elements so why only the last function gets 2 as the parameter?
Let's step through the code with a very simple example:
compose(f2, f3, f4)
As no initial value was passed to reduce, it will start with the first (f2) and the second (f3) value of the array and call the callback with that, x gets called with a being f2 and b being f3. Now x does'nt do anything, it just returns function y that can access a and b through a closure.
Reduce will now continue to the third element, the first argument being the result of the previous callback (the closured y), and the second argument being f4. Now x gets called again, and another closure is created over y, y gets the finally returned from the whole function.
If we try to visualize thus closured function it'll be:
y { // closure of y
a -> y { // a references another closure of y
a -> f3,
b -> f2
},
b -> f4
}
Now you call that closured y and pass 2 into it, that will call b (f4) and pass the result to the call to a (closured y).
a ( b(...args))
y { ... } ( f4(2) )
Now that closured y will do the same:
a ( b ( ...args))
f2( f3( f4( 2 ) ) )
Hint: It is sometimes really difficult to keep track of closured values, therefore the console provides you with great utilities to keep track of them: Open your code in the consoles "debugger" tab, click on the line numbers where the function calls are to attach breakpoints, then run the code again, the execution will yield whenever a breakpoint is reached and you can see the values of all variables (including closured ones).
The reduce is not calling the functions f2, f3, f3, f5, but it is creating a function from those. This is the value of the accumulator in each iteration. Note that the value is a function and not a result from execution of the function.
1:a=f2;b=f3;return value(NOT TEMP but function y)=f2(f3(...args))
2:a(prev return value)=f2(f3(...args));b=f4;return value=f2(f3(f4(...args)))
and so on....
The compose function can be re-written as:
function compose(...funcs) {
return funcs.reduce(function (a, b) {
return function (arg) {
const temp = a(b(arg));
return temp;
};
});
}
After the first iteration, the returned function which is passed in as the next accumulator is:
function (arg) { // R1
return f2(f3(arg));
}
After the second iteration, the returned function which is passed in as the next accumulator is:
function (arg) { // R2
return R1(f4(arg));
}
And finally, the returned function assigned to composedFunction is:
function (arg) { // composedFunction
return R2(f5(arg));
}
So running composedFunction(2) and going back up the chain:
f5(2) returns 10
R2(10) returns R1(f4(10))
which is R1(40)
R1(40) returns f2(f3(40))
which is f2(120)
which is 240
Hopefully that's sufficient.
It can be written as a single call as:
function composedFunction(arg) {
return f2(f3(f4(f5(arg))));
}
I am learning javascript, and I am not able to understand the following piece of code.
const increment = (function() {
return function test(number, value) {
return number + value;
};
})();
console.log(increment(5, 2)); // output 7
My attempt at understanding
I removed the () on line 5, and then ran the following code.
const increment = (function() {
return function test(number, value) {
return number + value;
};
});
console.log(increment(5, 2));
This returns the output test(number, value) which I can understand. The increment variable points to the function test.
However, I don't understand how adding () passes the arguments (5,2) to test?
Said another way, if the output of the second code block is test(number, value), the output after adding () is test(number,value)() which seems meaningless.
It calls self-invoking.
If you write function like that (function foo(){})() then foo will be immediately called and result will be returned.
So as result in increment you have test function.
And then you call it with arguments.
increment(5, 2) // test(5, 2)
Here is some info about that
() at the end of the function immediately calls it - it's called IIFE ("Immediately invoked function expression").
When calling it with increment(5, 2) - you are actually calling the test function that is returned by the IIFE.
Your question is regarding the Javascript Immediate Functions.
First, we need to know what a function is, which is basically a block of code that returns a value.
And to declare a function in Javascript, one way is this:
function a() {
return "in this case, a string";
}
If we do:
const variable = function () {
return "in this case, a string";
};
console.log(variable); // Function
But Immediate Functions, as the name implies, are functions that are executed immediately after being defined, so, the value that the function returns is the value that will be given to the variable:
const variable = (function () {
return "in this case, a string";
})();
console.log(variable); // "in this case, a string"
About removing parentheses:
// This is
const increment = (function() {
return function test(number, value) {
return number + value;
};
});
// ...the same as this
const increment = function() {
return function test(number, value) {
return number + value;
};
};
We use parentheses just to isolate this expression (which is the function) and execute it right afterwards:
// Now the parentheses make sense,
// because we need it to execute the function right after it is defined
const increment = (function() {
return function test(number, value) {
return number + value;
};
})();
Read more about Immediate Functions here
I am having trouble printing the correct result in NodeJS, why isn't my code printing the strings in the correct way ? I feel like console.log is not called at all. Why do I get :
[Function]
[Function]
[Function]
[Function]
Expected result:
Tigrou (buddy of Spider) was here!
Spider (buddy of Tigrou) was also here!
Tigrou (buddy of Spider) are in a boat...
1 (buddy of 2)3
The code I thought would work:
function build_sentence(...args)
{
var i = 0
var s = ""
for (let arg of args)
{
if (i == 1)
{
i++
s += "(buddy of " + arg + ") "
}
else
{
s += arg + " "
i++
}
}
return s
}
function mycurry(build_sentence)
{
return function(...args)
{
if (!args)
{
return build_sentence();
}
else
{
return mycurry(build_sentence.bind(this, ...args))
}
}
}
const curried = mycurry(build_sentence);
console.log(curried("Tigrou")("Spider")(" was here!"))
console.log(curried("Spider")("Tigrou")(" was also here!"))
console.log(curried("Tigrou", "Spider", " are in a boat... "))
console.log(curried(1)(2, 3))
Here's a full working solution for you (except the string spacing)
const build_sentence_n_params = 3;
function build_sentence(...args)
{
var i = 0
var s = ""
for (let arg of args)
{
if (i == 1)
{
i++
s += "(buddy of " + arg + ") "
}
else
{
s += arg + " "
i++
}
}
return s
}
// A generic n-parameter curry helper, that returns fn return value
// after n-parameters given, and continues currying with more parameters.
// Note that in this configuration, the caller would also need
// to know how many parameters to give before a value is returned.
function ncurry(fn, n)
{
// Note that we have to return an outer function here, rather than just
// returning `curry` function directly, so `params` is unique for each
// initial call to `curried`.
return function(...args) {
// Initial arguments (note: we can use this array without copy, since
// rest params will always be a new array)
const params = args;
// This function contains the return logic without having to duplicate it below
function next() {
// If we have all params, call the given function, otherwise
// return the curry function again for more parameters
return !n || params.length >= n ? fn.call(null, ...params) : curry;
}
// The outer function is only called once, but this curry
// function will be called for each additional time.
function curry(...args) {
// Accumulate additional arguments
params.push(...args)
return next();
};
return next();
};
}
function mycurry(build_sentence)
{
// Call the generic n-parameter curry helper to generate
// a specific curry function for our purposes.
return ncurry(build_sentence, build_sentence_n_params);
}
const curried = mycurry(build_sentence);
console.log(curried("Tigrou")("Spider")(" was here!"))
console.log(curried("Spider")("Tigrou")(" was also here!"))
console.log(curried("Tigrou", "Spider", " are in a boat... "))
console.log(curried(1)(2, 3))
Your method invocations are quite confusing so I took the liberty to simplify your code.
If you run the following:
const curried = build_sentence("Tigrou", "Spider", " was here!");
console.log(curried);
You will get your desired output:
Tigrou (buddy of Spider) was here!
Why you are using the mycurry method is beyond my understanding.
When debugging your code, the sentence is already built on the first invocation, and what happens is that the subsequent invocations are not really invocations of the inner functions.
the main issue about our code is that !args is all the time false, as [] to boolean is also true.
you have to use !args.length. however you should add an extra call to your curried function usage like curried(1)(2, 3)().
the other approach is using comparison of curried function number of required params (build_sentence.length) and the number of params passed (args.length), but it's not working with spread scenario.
upd:
ex.1 - using Function.prototype.length property
const curry = fn =>
(...args) =>
fn.length <= args.length
? fn(...args)
: curry(fn.bind(this, ...args));
const func1 = (a, b, c) => `${a},${b},${c}`;
const func2 = (...args) => args.join(',');
console.log(curry(func1)(1,3)(4));
console.log(curry(func1)(1,3,4));
console.log(curry(func1)(1)(3)(4));
console.log(curry(func2)(1));
in this case currying will work fine for func1 (function that has enumerable number of arguments) because func1.length = 3. however for func2 - func2.length = 0, so (curry(func1)) will be executed after first call.
ex.2 - using number of arguments passed
const curry = fn =>
(...args) =>
!args.length
? fn()
: curry(fn.bind(this, ...args));
const func = (...args) => args.join(',');
console.log(curry(func)(1)(2,3,4)(5)());
in this case function currying will only return result of fn executing, when called with no arguments. however it will handle innumerable arguments of curried function properly.
I'm trying to understand this functional style code from the book Eloquent Javascript:
http://eloquentjavascript.net/chapter6.html#exercise1
When the count() function passes an anonymous function to reduce() the code works. But if I break the function out into a helper function then I get a reference error.
Can anyone explain why count() works but countHelper() does not?
var numbers = [1,2,3,0,1,2,3,0]
function forEach(array, action) {
for (var i = 0; i < array.length; i++)
action(array[i]);
}
function reduce(combine, base, array) {
forEach(array, function (element) {
base = combine(base, element);
});
return base;
}
function equals(x) {
return function(element) { return x === element;};
}
function count(test, array) {
return reduce(function(base, element) {
return base + (test(element)?1:0);
}, 0, array);
}
function countHelper(test, array) {
function helper(base, element) {
return base + (test(element)?1:0);
}
return reduce(helper(base, element), 0, array);
}
function countZeroes(array) {
return count(equals(0), array);
}
print(countZeroes(numbers)) // 2
function countZeroesHelper(array) {
return countHelper(equals(0), array);
}
print(countZeroesHelper(numbers)) // ReferenceError: base is not defined
In countHelper(), you are actually calling the helper function immediately when you pass arguments to reduce() and passing its return value to reduce (which isn't what you want), rather than passing a reference to the function so reduce() can call the function when it wants to. You have this:
function countHelper(test, array) {
function helper(base, element) {
return base + (test(element)?1:0);
}
return reduce(helper(base, element), 0, array);
}
It should be this:
function countHelper(test, array) {
function helper(base, element) {
return base + (test(element)?1:0);
}
return reduce(helper, 0, array);
}
Note the difference in arguments to the reduce() function.
When you want to pass a function as an argument, you don't include the parens after it because that just causes it to be executed right away and passes the return value from executing it rather than just passing a reference to the function itself.
This is a common mistake in an untyped language like Javascript that lets you pass anything in any argument. Even seasoned programmers occasionally make this mistake (myself included). The important distinction to understand is the difference between executing the function vs. passing a reference to the function.
Ok my questions comes from an example from a book that i'm trying to understand.Keep in mind i just got into javascript.
So we have the object set and we define the function foreach. It takes another function as a parameter and invokes it for every item of an array "values" that belongs to set.
set.foreach = function(f,c) {
for(var i = 0; i < this.values.length; i++)
f.call(c,this.values[i]);
};
So far so good..
But i can't understand the usage of the foreach function in the second snipet.In particular i don't understand the role of the variable v. It is not defined enywhere else in the book and i m having a really hard time to understand how this work.We define another function in set to take the values as an array
set.toArray = function() {
var a = [];
this.foreach(function(v) { a.push(v); }); //where did v came from???
return a;
}
set.foreach = function(f,c) {
for(var i = 0; i < this.values.length; i++)
f.call(c,this.values[i]);
}; // ^-------------- being passed right here
The function you passed in is f, and f is invoked having the this value of its calling context set to c, and this.values[i] passed as the first argument.
// ------v---------your function "f" in the forEach
this.foreach(function(v) { a.push(v); });
// ------------^------references the first argument (after the "this" arg)
// that was passed to "f"
Here's a simpler example:
This function accepts a function as a parameter. The only thing it does is call the function:
function my_func( fn ) {
fn();
}
// call my_func, which will call the function you give it
my_func( function() { alert( "hi" ); } );
Live Example: http://jsfiddle.net/6a54b/1/
...so passing the function to my_func will alert the string "hi". No surprise.
But what if my_func provided the value to be alerted?
function my_func( fn ) {
fn( "message from my_func" ); // call the fn passed, giving it an argument
} // ^------------------------------------------------|
// |
// v------references the arg passed by my_func---|
my_func( function( arg ) { alert( arg ); } );
Live Example: http://jsfiddle.net/6a54b/
Now you can see that an argument is being passed to the function we're sending over, and we reference that argument with the arg parameter.
It alerts whatever my_func gave it.
We can even take it one step further, by passing a second argument to my_func that my_func will simply take and pass it to the function we pass in.
function my_func( fn, str ) {
fn( str ); // call the fn passed, giving it
} // the string we passed in
// v------the arg we passed here-----v
my_func( function( arg ) { alert( arg ); }, "I'm getting dizzy!" );
Live Example: http://jsfiddle.net/6a54b/2/
And you can see that both arguments are given to my_func, and my_func calls the function we passed in, passing it the string argument we gave it.
The variable vis an argument being passed to the function. It allows you to work with whatever the function receives. It is no different than namein the following example:
function sayHello(name) {
console.log('Hello '+name);
}
f.call mean calling function f with arguments this.values[i]. this in foreach is set.
about calling foreach from toArray, passing function with v, the values[i] in foreach become v in toArray.
v in this case is being passed in from the call statement f.call(c, this.values[i]). Specifically, it is this.values[i]
The above statement is equivalent to simply:
f(this.values[i])
where f is the function in your 2nd snippet (function(v){ a.push(v); });)
The reason it's typed as .call instead of just calling it is so that the this property can be set, so this in your 2nd function is the array itself, meaning you could type:
function(v){
alert(this.length); // "this" == array
}
v represents each item in the list as your foreach() function loops through them.
so if you have 10 items in your "set" the function will be called 10 times, providing each item in the set to the function as argument v
for example:
set = [1,2,3,4,5];
set.foreach = function(fn, context) {
for(var i = 0; i < this.values.length; i++) {
fn.call(context, this.values[i]);
}
};
set_times_2 = [];
set.foreach(function(item) {
set_times_2.push(item);
set_times_2.push(item);
});
// this is true now:
set_times_2 == [1,1,2,2,3,3,4,4,5,5];
Lots of answers, here's one that specific to your question.
> this.foreach(function(v) { a.push(v); }); //where did v came from???
In the function expression passed to foreach, v is a formal parameter. Including an identifier as a formal parameter is more or less equivalent to declaring it in the function body with var. Maybe it's clearer if written as:
this.foreach( function (v) {
a.push(v);
});
or not...