FAQ: Higher-Order Functions - Functions as Parameters

Really confusing exercise.

" Save a variable, time2p2 . Assign as its value the result of invoking the timeFuncRuntime() function with the checkThatTwoPlusTwoEqualsFourAMillionTimes() function."

Uhh what?

the only illogical thing here is that we pass a function as argument to another function? Declaring a variable and calling a function should be do-able, have you done this?

Thanks I got the exercise done, it’s just REALLY confusing wording.
Assign as its value the result of invoking the functionName() function WITH the functionName2() function."
What the ■■■■ does it mean WITH? They wanted to call the function using function name as parameter, they could have worded that better.

Perhaps, but clear instructions/requirements are the dream of every software developer. Rarely the case, part of our job involves dealing with unclear instructions and trying to make sense of them

1 Like

Check out the hearts on your post… I think this sums up most peoples feelings about this totally OVER our heads exercise. It somehow jumped 50 pages ahead in the Javascript manual and left us all feeling quite stupid. I have LITERALLY no idea what they’re talking about.

1 Like

This post was flagged by the community and is temporarily hidden.

checkConsistentOutput = (func, val)

Knowing to define (func, val) in parentheses like this was SO above my head, however out of curiosity are these defined JavaScript arguments that JS understands as an actual function and then a value. Or could they be easily (jim, bob) ?

Finding this exercise to be TOTALLY over my head still. They seem to introduce new syntax that they don’t explain:

timeFuncRuntime*(() => {
  for (let i = 10; i>0; i--){
    console.log(i);
  }
})*;

These brackets at the stars seem to mean we can pass as an argument an entire concise arrow function. When was this covered previously or explained simply? In counting they’ve introduced three brand new concepts in one single exercise without explaining them beforehand.

Written like that it will not be a function. Instead,

checkConsistentOutput = function (func, val) {

}

The parameter names are arbitrarily chosen but they loosely describe the type: func we take to be a function, val we take to be a value. One would expect the function we pass in will be called (invoked) with the value as its argument.

That won’t run since, a) it is not defined as a function, and, b) there is nothing to invoke the callback (the function expression in the argument). Even if it is defined as a function, there is no formal argument in the call. One suspects it should look like this…

const timeFuncRuntime = () => {
  for (let i = 10; i>0; i--){
    console.log(i);
  }
};

It might be that you didn’t assign it as a variable or function, i.e.
const time2p2 = timeFuncRuntime(checkThatTwoPlusTwoEqualsFourAMillionTimes);
or
let time2p2 = timeFuncRuntime(checkThatTwoPlusTwoEqualsFourAMillionTimes);

that one is obvious to me,
let time2p2 = timeFuncRuntime(checkThatTwoPlusTwoEqualsFourAMillionTimes);

will solve your problem

I do hope in the future they will take the time to change this to something more understandable. The Iterators cheatsheet has a much better function to explain this section in my opinion. At the very least you can tell what the purpose of the function is. I understand we should be looking things up if we get stuck because Google is a programmers friend, but I came here to get an explanation for how the most basic language works, not a complicated function that makes very little sense and is explained in a way that somehow makes it make less sense. There is a huge gap between under explaining a bit of code to push you to search out the answer yourself, and explaining an entire section so poorly you have to look everything about it up. I appreciate you asking all of these questions because I certainly had all of them myself along with a few others.

1 Like

No worries, I cut the function part away, it should’ve ended with…

checkConsistentOutput = (func, val) =>

But it was just a question about the parameters, thanks for letting me know that they’re arbitrary.

The code afterwards

timeFuncRuntime(() => {
  for (let i = 10; i>0; i--){
    console.log(i);
  }
});

That’s literally in the example of the exercise and I’m trying to understand it’s parentheses wrapping. It’s as if an entire function sits in the parentheses of the argument of a function called “timFuncRuntime”. is this possible to do? Here’s the exercise link: https://www.codecademy.com/courses/introduction-to-javascript/lessons/higher-order-functions/exercises/functions-as-parameters

Ah, okay. That’s not a function, but a function call.

const timeFuncRuntime = funcParameter => {
  let t1 = Date.now();
  funcParameter();
  let t2 = Date.now();
  return t2 - t1;
};
 > timeFuncRuntime(() => {
     for (let i = 10; i>0; i--){
     console.log(i);
     }
   });
 ​  10
 ​  9
  ​ 8
 ​  7
  ​ 6
  ​ 5
  ​ 4
  ​ 3
  ​ 2
   1
<- 1

The last line is the response returned by the HOF.

Thanks for the response mtf.

1 Like

I went with the example that was in the video because it was broken down much more simply and here’s his code, which is just a simple calculator.

let add = function(a, b){
	return a + b;
};

let multiply = function(a, b){
	return a * b;
};

let calculator = function(num1, num2, callback){
	return callback(num1, num2);
}

console.log(calculator(10, 10, multiply)); // Prints: 100

I still have questions as to what exactly is going on. In the add and multiply functions the parameters are represented as (a, b) but in the calculator function they are (num1, num2). Why not just (a, b) here as well - is this trying to show that we can map parameters from one function into OTHER parameters in another function. I don’t see why ‘a’ needs to become ‘num1’, but now see that ‘a’ can represent ‘num1’.

Secondly, where he gives the parameter ‘callback’ after num1, num2, I thought this was maybe a unique, protected JS word like ‘console.log’ (considering ‘callbacks’ are an official function of JS), however I replaced ‘callback’ with ‘bob’ and it worked just as well. Hence it seems that it’s just a mapping object - a thing that represents another thing somewhere else and it’s supposed to represent the call for ‘add’ and ‘multiply’, but where is the link between ‘callback’ and ‘add’ and ‘multiply’, there doesn’t seem to be any connection.

const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
const calculator = (a, b, fn) => fn(a, b);

The callbacks are dependencies so need the added protection of const to keep them from being overwritten. This is a perfect scenario for concise body syntax… Helper functions.

The parameters in all cases are arbitrary. We don’t pass in the parameters, but the values they will reference in their scope.

callback is also an arbitrary variable name. It could be, ‘func’, or ‘f’, or any other name. The names are clear in terms of what they represent. The function takes two numbers and a function reference.

The “link” is in the call argument handed to calculator(). multiply is a named reference to the helper function. Picture it as,

return multiply(num1, num2)

That is very concise body syntax, it went from 7, 8 lines to just 3. Thanks for the simplicity, very clean.

I’ve read through your description a few times now and it’s starting to sink in, the whole concept, but I hope I’m not asking a stupid question when I say how does fn know not to represent ‘a’ or ‘b’ but only add or multiply.

This certainly applies in my example where a and b get replaced as num1 and num2 arbitrarily and the code and yet there’s some inherent logic or ordering that ensures that num1 will map to ‘a’, num2 to ‘b’ and callback to ‘add’ or ‘multiply’. I’m just failing to see how they don’t get mixed up, for example how callback doesn’t become ‘a’ at some point. I know it’s to do with ordering and what order we’ll write the function but maybe in some cases in JS im seeing elements of making x === y explicitly and writing out something in a way that’s it’s not ambiguous but here there’s some assumptions to make between the parameters, hidden remapping and that’s taking me for a ride in my brain.

If I’m not clear by what I mean, let me know and I’ll simplify.

Or subtract or divide…

fn is a parameter, but expects a function reference. The function reference given is what gets invoked.

Understood that it could also do subtract or multiply (I’ve already implemented that, in fact right now I’m trying to introduce a squaring function to embellish it a little with more stuff and test myself a bit) but my question is more, how does JS know when I pass a value to parameter ‘num1’ to pass it to parameter ‘a’ - where’s the link between ‘num1’ and ‘a’ - how do they have a relationship in the code below, why do they trust each other when they’re defined as arbitrarily different? This is a question of how differing things are mapped to each other. It seems somewhat illogical.

const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
const minus = (a, b) => a - b;
const divide = (a, b) => a / b;
const calculator = (num1, num2, callback) => callback(num1, num2);
console.log(calculator(10, 10, add)); // Prints: 20

Parameters are just labels. They correspond with the values in the call argument.

arg     param  arg     param
10  =>  num1;  num1  =>  a
10  =>  num2;  num2  =>  b
add =>  callback =>  a + b

When a value is passed via the call argument, the function parameter references that value. When it is passed again from within the first function to the second via the call argument, only the value is passed and the callback parameter becomes the name we reference that value by in the second function.