I'm trying to understand the mechanism of higher order function in JavaScript.
The example I read from eloquent JavaScript is as below.
function greaterThan(n){
return m=>m>n;
}
const greaterThan10=greaterThan(10);
console.log(greaterThan10(11));
I was wondering how do JS automatically recognizes the variable 'm' which wasn't passed to the function as a second variable in a higher order.
I assumed that any variable defined in a higher order function is reserved for the higher order.
Then I tested it out doing like below.
function greaterThan(n){
console.log(m)
return m=>m>n;
}
It throws an error which means my assumption was wrong.
How do JS prepare itself in a higher order function as it does in the first example.
The code seems like it prepared itself saying
" m is not a parameter passed by its function, however it is going to be passed later on in a higher order."
How did it prepared itself for the higher order function? and why my trial (the second approach) is not working?
Your code annotated below:
function greaterThan(n){
console.log(m); // At this point the below function doesn't exist and has not been called yet
return m => m > n; // You're returning a function here with a parameter named m;
}
When you call greaterThan(10) you're getting a function, which needs two inputs to return a result:
m which resolves when you further call the function returned by greaterThan(10)
n which is is a reference to the greaterThan parameter. It is kept alive (not destroyed by the garbage collector) thanks to the JavaScript's closure mechanism
m in this case is the parameter of the lambda function which is returned by greaterThan.
function greaterThan(n) {
// This is lambda function which uses n from the greaterThan function and has m as a parameter
return (m) => m > n;
}
const greaterThan10 = greaterThan(10);
// This equals to this:
const greaterThan10 = (m) => m > 10;
// Which equals to this:
function greaterThan10(m) {
return m > 10;
}
function greaterThan(n){
return m=>m>n;
// here u are actually returning a arrow fn which will take m as paramater
}
const greaterThan10=greaterThan(10);
// the returned fn reference will be assigned to greaterThan10
// greaterThan10 = m => m>11
console.log(greaterThan10(11));
// here u are passing 11 as a paramater to the arrow fn which u are returning
U are trying to log m before u send the parameter m
I found this on a book. It is not well explained there, specially 'vals.sort(compare)' part. Can anyone please explain me this?
<script>
function compare ( value1, value2) {
if (value1 > value2) {
return 1;
}
else if (value2 > value1) {
return -1
}
else {
return 0;
}
}
var vals = [12,93,41,62,99]
vals.sort(compare)
document.write(vals)
</script>
sort() is an array utility function used to sort array values according to conditionals.
If sort() is called without passing an anonymous function or named function, the values are sorted according to each character's Unicode code point value by default.
In javascript, you can pass functions either anonymously(function(){...}) or by name like:
function myFunction(){}
[].sort(myFunction);
Note, you only pass the function name and not like myFunction() becuase this will execute the function and pass in what is returned(which is not what we want)
In the callback function passed into sort(), for example, compare(a,b), returning
-1 -> a is less than b
0 -> a is equal to b
1 -> a is greatar than b
We can pass the compare function as as argument for the sort method or write it inline, e.g.
<script>
var a = [30,2,1,9,15];
a.sort(function(a,b) { return a-b; });
document.write(a);
</script>
or we can specify the compare method and call it explicitly as in your case.
When the sort() method is called, it compares two values. It sends the values to the compare function, and sorts the values according to the returned (negative, zero, positive) value.
I'm looking for a javascript function that can:
Condition (I)
compose another function when it does not have recursion in its definition, kind of like in maths when the function is given a power, but with multiple arguments possible in the first input - e.g. with a (math) function f:
f(x) := x+2
f5(x) = f(f(f(f(f(x))))) = x+10
Condition (II)
Or maybe even input custom arguments into each step of composition:
(52)2)2=
Math.pow(Math.pow(Math.pow(5,2),2),2) = Math.pow.pow([5,2],2,["r",2]])
//first arg set, how times the next, 2nd arg set - "r" stands for recursion -
//that argument will be occupied by the same function
//Using new solution:
_.supercompose(Math.pow,[[5,2],[_,2],[_,2]]) //-> 390625
2((52)3)=
Math.pow(2,Math.pow(Math.pow(5,2),3)) = Math.pow.pow([5,2],["r",2],["r",3],[2,"r"])
//Using new solution:
_.supercompose(Math.pow,[[5,2],[_,2],[_,3]]) //-> 244140625
_.supercompose(Math.pow,[[5,2],[_,2],[_,3],[2,_]]) //-> Infinity (bigger than the max. number)
Note: The above are just templates, the resulting function doesn't have to have the exact arguments, but the more close to this (or creative, for example, a possibility of branching off like this ->[2,4,"r",4,2,"r"], which would also be complicated) the better.
I've been attempting to do at least (I) with Function.prototype, I came up with this:
Object.defineProperty(Function.prototype,"pow",{writable:true});
//Just so the function not enumerable using a for-in loop (my habit)
function forceSlice(context,argsArr)
{returnArray.prototype.slice.apply(context,argsArr)}
Function.prototype.pow = function(power)
{
var args=power<2?forceSlice(arguments,[1]):
[this.pow.apply(this,[power-1].concat(forceSlice(arguments,[1])))];
return this.apply(0,args);
}
//Usage:
function square(a){return a*a;}
square.pow(4,2) //65536
function addThree(a,b){return a+(b||3); }
// gives a+b when b exists and isn't 0, else gives a+3
addThree.pow(3,5,4) //15 (((5+4)+3)+3)
Worst case, I might just go with eval, which I haven't figured out yet too. :/
Edit: Underscore.js, when played around with a bit, can fulfill both conditions.
I came up with this, which is close to done, but I can't get it to work:
_.partialApply = function(func,argList){_.partial.apply(_,[func].concat(argList))}
_.supercompose = function(func,instructions)
{
_.reduce(_.rest(instructions),function(memo,value)
{
return _.partialApply(_.partialApply(func, value),memo)();
},_.first(instructions))
}
//Usage:
_.supercompose(Math.pow,[[3,2],[_,2]]) //should be 81, instead throws "undefined is not a function"
Edit: jluckin's cleareance of terms (recursion-> function composition)
Edit: made example function return number instead of array
The term you are looking for is called function composition, not necessarily recursion. You can apply function composition in javascript easily since you can pass a function as an argument.
I created a small function called compose, which takes a function, an initial value, and the number of times to compose the function.
function compose(myFunction, initialValue, numberOfCompositions) {
if (numberOfCompositions === 1) {
return myFunction(initialValue);
}
else {
return compose(myFunction, myFunction(initialValue), --numberOfCompositions);
}
}
When this function is evaluated, you pass in some function f(x), some initial x0, and the repeat count. For example, numberOfCompositions = 3 gives f(f(f(x)));
If there is one composition, then f(x) is returned. If there are two compositions, compose returns f(x) with f(x) replacing x as the argument, with 1 passed in as the composition so it will evaluate f(f(x)).
This pattern holds for any number of compositions.
Since functions are treated as objects and can be passed as arguments of functions, this method basically wraps your "non-recursive" functions as recursive functions to allow composition.
Success(simplicity wins):
_.supercompose = function (func,instructions,context)
{
var val;
for(var i = 0; i < instructions.length; i++)
{
val = _.partial.apply(_,[func].concat(instructions[i])).apply(context||this,val?[val]:[]);
}
return val;
}
//Usage (with a function constructor for operations):
_.op = function(o){return Function.apply(this,"abcdefghijklmnopqrstuvwxyz".split("").concat(["return " + o]))}
_.op("a+b")(3,5) //-> 8
_.op("a*b")(3,5) //-> 15
_.supercompose(_.op("(a+b)*c*(d||1)"),[[1,2,3],[-5,_,1],[1,2,_,3]])
//-> (1+2)*((-5+((1+2)*3))*1)*3 -> 36
I have recently encountered a nasty issue in JS.
Let say we pass a map, an array of objects to a function f.
var o=[{a:0}];
function f(a){
for(var i in a){
if (a.hasOwnProperty(i)){
a[i]=null;
}
}
return a;
};
var outp=f(o);
alert(outp[0]+" === "+o[0]+" : "+(outp[0]===o[0]));
// here we expect loose equality, and equality in type,
//furthermore it should identically equal as well, and we got right!
But, we can not pass total responsibility of an object to a function as argument, same like in functional paradigm o=(function(o){return o})(), because any kind of modification to o is not referenced!
var o=[];
function ff(a){
return (a=undefined);
};
var outp=ff(o);
alert(outp+" === "+o.constructor+" : "+(outp===o));
// here we expect true, but we got false!
Why is the above described reference loss and
presumably different referencce handling in the second use case,
though in both case, functions got the array argument in the 0. position?
Javascript always passes arguments by value, so this won't work:
function foo(x) {
x = 100;
}
y = 5
foo(y)
y == 100 // nope
However this does work:
function foo(x) {
x.bar = 100;
}
y = {}
foo(y)
y.bar == 100 // yes
In the second snippet x is still passed by value, but this very value is a reference (pointer) to an object. So it's possible in a function to dereference it and access what's "inside" the object.
Why the following code does not increase the variable a for 1 ?
var a =5;
function abc(y){
y++;
}
abc(a);
//a is 5 not 6 why?
but this does
var a = 5;
function abc(){
a++;
}
abc();
//a is 6
Because primitive values are passed by value in JavaScript.
To get the value to be updated, you could put a on an object and take advantage of the fact that objects are passed by reference (well, mostly, really a copy of the reference is passed, but we won't worry about that):
var obj = { a: 5 };
function abc(o){
o.a++;
}
abc(obj);
it takes the argument, but doesn't return any values.
y is just an argument for this I suggest two ways to do this
var a = 10
function increase(){
a++
}
increase();
var a = 10;
function increase(a){
return a++;
}
a = increase(a);
For a beginner's sake,
In simple words, when you call function by abc(a), 'a' is not passed to function abc but its value is copied to 'y'. (Its called pass by value). Since only 'y' in increased, you dont see an updated value of 'a'.