Higher Order Functions - Eloquent JS - javascript

I have been reading through Chapter 5 last night and throughout the morning and can't seem to get the higher order functions concepts to stick. Here are the examples:
//I understand this first function, I am including it because it is used in the next function.
function forEach(array, action) {
for (vari = 0; i < array.length; i++)
action(array[i]);
}
forEach(["Wampeter", "Foma", "Granfalloon"], print);
function sum(numbers) {
var total = 0;
forEach(numbers, function(number) {
total += number;
});
return total;
}
To my understanding the function sum is taking the argument numbers, which I believe comes in as an array? Now, when the forEach function is called (within sum), it takes the array numbers passed to sum and then it also takes an anonymous function?
I am really confused on what this anonymous function is actually doing. It is taking the parameter number but what else is it doing? Does this anonymous function imply that in that parameter, a function like print or show will be passed the parameter number? In other words it would look something like this
function([10,12,11]) {
var total = 0
forEach([10,12,11]), show(???)
//at this point it would iterate over the array, and use the action passed to display `//the pointer in the array. What I think is happening is that it is taking this pointer value and adding it to the total.` //
I have been trying to wrap my head around this example for a while, if anyone knows of a good explanation or any other documentation to read over I would greatly appreciate it, thanks!

The anonymous function is applied to every currently selected element. You can see better how this works if you unroll (execute stepwise) the loop (pseudocode, * means current element):
var total = 0;
forEach([*1, 2, 3]), fun(1)) => total = 0 + 1 = 1
forEach([1, *2, 3]), fun(2)) => total = 1 + 2 = 3
forEach([1, 2, *3]), fun(3)) => total = 3 + 3 = 6
You can rewrite the sum function like this:
// because there is no "pass by reference" in JavaScript for
// "simple" types, total must be wrapped in an object
// in order to return the sum through the parameter for the showcase
var result = { total: 0 }
function sum(numbers_array) {
for (var i = 0; i < numbers_array.length; i++) {
accumulate(result, numbers_array[i]);
}
}
function accumulate(acc, number) {
acc.total += number;
}
In this case the accumulate function does the same as the anonymous function. When the accumulate function is declared within the scope of the sum function, then the total variable is like global (it is known) to the accumulate function and then there is no need of the first parameter, so the function becomes like the one you already know:
var total = 0;
function sum(numbers_array) {
function accumulate(number) {
total += number;
}
for (var i = 0; i < numbers_array.length; i++) {
accumulate(numbers_array[i]);
}
}
Next step would be to extract and pass the accumulate function as parameter:
var total = 0;
function accumulate(number) {
total += number;
}
// notice, that JavaScript knows how many parameters your function expects
function sum(numbers_array, action) {
for (var i = 0; i < numbers_array.length; i++) {
action(numbers_array[i]);
}
}
What left is to extract the iteration and the code will look like this one in the book.

Let me see if I can explain this easily for you:
The forEach() function accepts two parameters, the first one called array is obviously an array or an array-like object, the second parameter called action is actually a function.
forEach() visits each element in the array passed to it and applies to each element in the array the function passed to it as the second parameter.
So forEach() calls the function passed to it named action for each element in the array and it gives the function the array element as a parameter.
The function sum(numbers) accepts an array as you have though, and it uses forEach() inside itself to calculate the sum of numbers in that array using the anonymous function.
Remeber that the anonymous function is called once for each element in the array passed to sum() so it actually sums the elements in the array.

In simple words : to make your code more generic and concise.
Ex:
Lets say we want to find the max element in an Array :
That's pretty easy and cool :
In java script we will write :
var array = [10,20,30,40,50,60]
function maxEle(array){
var max = array[0];
for(var i=0;i< array.length;i++){
if(max < array[i]){
max = array[i];
}
}
console.log(max);
}
So this will give me the maximum element in an array.
Now after few days, some one asked me that your max is working pretty cool, I want a function which will print the minimum in an array.
Again I will redo the same thing, which i was doing in finding Max.
function minEle(array){
var min = array[0];
for(var i=0;i< array.length;i++){
if(min > array[i]){
min = array[i];
}
}
console.log(min);
}
Now this is also working pretty cool.
After sometime, another requirement comes up : I want a function which will print the sum of all the elements of the array.
Again the code will be similar to what we have written till now, except now it will perform summation.
function sumArr(array){
var sum = 0;
for(var i=0;i< array.length;i++){
sum = sum + array[i];
}
}
console.log(sum);
}
Observation :
After writing these bunch of codes, I m rewriting almost the same thing in every function, iterating over the Array and then performing some action.
Now writing the repetitive code is not a cool stuff.
Therefore we will try to encapsulate the varying part i.e action viz min, max, summation.
Since its feasible to pass functions as arguments to a function in FPL.
therefore we will re-factor our previously written code and now write a more generic function.
var taskOnArr = function(array, task){
for(var i=0;i<array.length;i++){
task(array[i]);
}
}
Now this will be our generic function, which can perform task on each element of Array.
Now our tasks will be :
var maxEle = array[0];
var taskMaxEle = function(ele){
if(maxEle < ele){
maxEle = ele;
}
}
Similarly for min element :
var minEle = array[0];
var taskMinEle = function(ele){
if(minEle > ele){
minEle = ele;
}
}
Also for summation of Array :
var sum = 0;
var taskSumArr = function(ele){
sum = sum + ele;
}
Now we need to pass functions to taskOnArr function :
taskOnArr(array,taskSumArr);
console.log(sum);
taskOnArr(array,taskMinEle);
console.log(minEle);
taskOnArr(array,taskMaxEle);
console.log(maxEle);

Related

How to use map() and reduce() functions in Javascript?

I am writting a simple function that would allow me to calculate prime numbers on one of nosql databases. After multiple approaches, i got an error that value i am looking for is not defined, thus I would appreciate your feedback.
Here is what i have tried:
First I have generated a set of numbers:
for (var i = 0; i < 1000; i++) db.exemplary.insert( {x: Math.random()} );
2.Secondly I have defined map function
map = function() {
for (var i = 2; i < x; i++){
if(x % i == 0)
try {} catch (e) {};
}
emit(i, value);
};
In the end the reduce function:
reduce = function (i,value){return array.sum(value)}
I assigned the collection to variable and called the function:
collection = db.exemplary
var result = collection.mapReduce(map, reduce, {out: {inline: 1}});
As per my begginer understanding the map step should check whether the number is prime or not.
Reduce step on the other hand should sum all occurrences of prime numbers.
I got error that x is not defined, but it is present in the db.exemplary collection.
I would appreciate every improvement hint/suggestion for above functionality.
EDIT: Currently my function does not "emit" any results of map operation, working on this bit now.
Math.random() generates by default float numbers from 0 to <1.
then in your generator you should use a function like this, for example to get random numbers from 0 to 999 :
{ x: Math.floor(Math.random()*1000) }

Working with array of objects in JavaScript

Question: Develop an array of 1000 objects (having properties name and number as shown).
We need a function to convert every object so the name is uppercased
and values are 5 times the original and store into the higher
variable. Similarly, another function that converts every object so
the name is lower case and value is 3 times the original, store this
into the little variable.
We need a function that takes each object in higher and finds all
objects in little that evenly divide into it. Example: 30 in
higher object is evenly divided by 6 in little.
The output of 2 must be an array of higher numbers, and in every
object there should be got (which is a variable inside the object) which will contain every little
object that evenly divided the higher.
My code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
var n = 1000;
var sample = [];
for (var i = 0; i < n; i++) sample.push({
name:'John' + i,
value: i
});
console.log(sample);
function Converter() {
var n = 1000;
var higher = sample;
for (var i = 0; i < n; i++) higher.name = 'John' + i;
higher.value = i * 5;
console.log(higher);
}
</script>
</body>
</html>
The array of objects is created and it is as expected/required by the question, however, the converter function for higher does not work, also how should the 3rd question be done?
Some thoughts:
1) only constructors should start with a capital letter, functions should be camelcase by convention so it should be converter
2) you don't call converter() so it never gets executed
3) make sure to indent your code properly var n and var sample should be at the same depth.
4) if you omit the brackets after an if or for, only the following statement gets inside the branch, so in your case you do:
for (var i = 0; i < n; i++)
higher.name = 'John'+i;
higher.value = i*5;
so the second line isn't even executed in the loop, you want:
for (var i = 0; i < n; i++) {
higher.name = 'John'+i;
higher.value = i*5;
}
5) higher.name makes little sense as higher is an array, you want to change the name of the ith higher number which you can do with higher[i].name
6) "John1" is not in caps, you want to call toUpperCase on it (("John1").toUpperCase())
also how should the 3rd question be done?
I guess fixing your code and doing the second question is enough for today.
You could continue reading:
Coding style matters
js array iterations
You should also try to think in a more structured manner about your code here. I would suggest writing separate functions for each problem and giving them meaningful names. Perhaps something like the following:
var n = 1000;
var sample = [];
for (var i = 0; i < n; i++) sample.push({
name: 'John' + i,
value: i
});
console.log(sample);
var higher = convertToHigher(sample);
var little = convertToLittle(sample);
var higherWithDivisors = findAllDivisors(higher, little);
function convertToHigher(arr) {
var newArr = [];
// TODO: iterate through each entry in arr, create a new modified object
// with a higher value and add it to newArr
return newArr;
}
function convertToLittle(arr) {
var newArr = [];
// TODO: iterate through each entry in arr, create a new modified object
// with a lower value and add it to newArr
return newArr;
}
function findAllDivisors(arr1, arr2) {
var newArr = [];
// TODO: solve problem 3 here
return newArr;
}

reset a variable for a reusable function

I have a bit of code that counts how many objects are in the returned json and gives me the total number.
loadCountSetOne = 0;
$.each(dataSetOne.user.customers, function(key, val) {
loads = Object.keys(val.loads).length;
loadCountSetOne = loadCountSetOne + loads;
console.log(loadCountSetOne);
});
This works fine, but since I'll need to count these a bunch of times I thought I'd move it into it's own function and call it when I need it with something like counter(val.loads);
count = 0;
function counter(itemToCount) {
result = Object.keys(itemToCount).length;
count = count + result;
console.log(itemToCount, result, count);
return count;
}
When I call the function the 1st time I get the right result. When I call it again it adds the 2nd result to the 1st and so on.
My understanding is that that is what it's supposed to do, but not what I need it to do. I tried resetting the value for count is various places but it didn't work.
Is there a way to make this function give me a result based on the number of objects in itemToCount each time it's called?
Thanks.
You can't do this in the counter() function itself, since it has no way of distinguishing the first call (which should reset the variable) with subsequent calls. You could pass the array index, and it could reset the total when the index is 0, but this is not a good general solution because you might want to use the function in other ways.
You just need to reset the variable before the $.each() loop:
count = 0;
$.each(dataSetOne.user.customers, function(key, val) {
counter(val.loads);
});
Or you could use reduce, which is designed for accumulating values.
function counter(total, itemToCount) {
var result = Object.keys(itemToCount).length;
total += result;
console.log(itemToCount, result, total);
return total;
}
var count = dataSetOne.user.customers.reduce(function(total, current) {
return counter(total, current.loads);
}, 0);

Use closure to sum numbers

Currently I have a closure in JS that looks like the following:
var addTo = function(num){
var add = function(inner){
return inner + num;
};
return add;
};
var sum = new addTo(1);
My goal is to use the above closure to compute the sum from 1 all the way to 100 (i.e. sum = 1+2+3+...+99+100). Any help? I know a loop is needed, but am unsure of what should go inside the loop and how to use closure to achieve the goal. Thanks guys.
Currently I have a closure in JS that looks like the following:
All functions create closures, they're only remarkable when advantage is taken of them. ;-)
var addTo = function(num){
I don't know why function expressions are used when declarations are clearer (to me):
function addTo(num) {
then there's:
var add = function(inner){
return inner + num;
}
return add;
}
Which (sticking with an expression) can be:
return function (inner) {return inner + num};
}
Then you call it with new:
var sum = new addTo(1);
which causes addTo to create a new object that is not used, so you might as well do:
var sum = addTo(1);
which produces exactly the same result. So:
function addTo(num) {
return function (inner) {return inner + num};
}
var sum = addTo(1);
document.write(sum(3));
However, this is really just a version of Currying, so that sum will just add the supplied value to whatever was initially supplied to addTo.
If you want to add all the numbers from 0 to some limit, you just need a loop, no closure required:
function sumTo(num) {
var total = 0;
for (var i = 0; i <= num; i++) {
total += i;
}
return total;
}
document.write(sumTo(5)); // 15
Note that supplying a negative number will result in an endless loop, you should protect against that (I'll leave it up to you to work out how).
Try
function sum(x) {
var input = x;
function add(y) {
return input + y;
}
return add;
}
//var sum1 = sum(2);
//console.log(sum1(3)); // 5
console.log(sum(2)(3)); //5
Maybe you want to use recursive instead of loops?
function addTo(initial) {
function add(adder) {
if (initial < 100) {
initial+=1
return add(adder+initial)
}
else {
return adder
}
}
return add(initial)
}
document.write(addTo(1))
As long as the initial values don't go over 100, it would just add with sum of all calculation before + itself + 1.
It looks like the addTo() function returns another function into sum that will add whatever you pass it to the original number (or I assume that's what you meant to write; the first thing to do is change the statement inside of add() to use a += instead of just + to make sure you save the result).
Since you want to add each number from 2 to 100 (since you already passed 1 into addTo()), try writing a for loop that runs from 2 to 100 passing each one into the sum() function to add them all together. Here's an example:
var sum = addTo(1);
for (var i=2; i<100; i++) sum(i);
var result = sum(100);
Here I added 100 after the loop since I wanted to grab the final result. You could also add 100 in the loop and use sum(0) to get the result without changing it after the loop.

Infinite recursion in JavaScript quicksort?

Here is the quicksort code I wrote. The function doesn't work because it can't reach the base case. If I log the pivot, r and l to the console, they remain the same no matter how many times the sort function is called. So I wonder if the argument l, r are not really passed into the function as data. Why did it happen?
function sort(data){
if(data.length < 2){
return data;
}
else{
var l = [];
var r = [];
var pivot = parseInt(data.length/2);
for(i=0; i<data.length; i++){
if(data[i] > data[pivot]){
r.push(data[i]);
}
else{
l.push(data[i]);
}
}
return sort(l).concat(sort(r));
}
}
I think that the issue here is that your partitioning step does not necessarily shrink the input array. For example, let's trace what happens if you try sorting [1, 2]. In this case, your pivot element will be the element 2. Since 1 > 2 is false, 1 is added to the list l. Since 2 > 2 is false, 2 is added to the list l. As a result, your recursive call on the list l will have exactly the same arguments as your original call, causing infinite recursion.
To fix this, try splitting the input into three lists - one of smaller values, one of equal values, and one of greater values. This code is shown here:
function sort(data){
if (data.length < 2){
return data;
} else {
var l = [];
var r = [];
var e = [];
var i = 0;
var pivot = (data.length / 2) | 0;
for(i = 0; i < data.length; i++) {
if (data[i] > data[pivot]) {
r.push(data[i]);
} else if (data[i] < data[pivot]) {
l.push(data[i]);
} else {
e.push(data[i]);
}
}
return sort(l).concat(e, sort(r));
}
}
This new version explicitly groups the equal elements into their own list, so they aren't recursively sorted by either of the recursive calls. It also gracefully handles duplicate elements.
If you pick the largest value of the array as the pivot element, then all values of data will end up in the array l and none in r. Thus will make the recursion never stop (and keep l, r and pivot at the same values).
Unless this is a brain excercise, using data.sort() should do a better job. ;)
JavaScript passes objects by reference (arrays are objects too). If you want to pass them by value, you need to use the splice function as explained here.
Note that this will create a lot of copies of your data. You probably want to use the native sort() function.

Categories