Crossing wires somewhere with callbacks and HOF’s

I’m on the 3rd of 4 lessons in this higher order functions section.

I’m kind of getting the grasp of this, I think.

If i have a function, i can pass another function as an argument.

Here’s a very simple, very convoluted example I’ve made up to try to explain my understanding of this, and hopefully my confusion.

``````const funcOne = (func) => return funcOne + 20;
const funcTwo = (num) => num + 10 ;

funcOne(funcTwo);
``````

I got a little confused at the end there lol. Essentially, funcTwo should take a number, add 10, pass it to funcOne, funcOne should add 20.

I’ll be sleeping soon, but i’ll check this in the morning. Please help me figure this out, i feel like i’ve hit a stumbling block ! Thanks

Edit begins here:
I did a little fiddling with it in the codecademy console. This works, but i’ve invoked the second function as an argument of the first function (and fixed things so they work as intended.)

However, I’m still not getting my original issue: Why does the exercise say not to invoke the function when it’s called as an argument. Infact, scrap that. Can anyone please just explain this to me like i’m stupid (don’t worry, i probably am xD).

Here’s the refactored code:

``````const funcOne = (func) => func + 20;
const funcTwo = (num) => num + 10 ;

console.log(funcOne(funcTwo(10))); // The (10) at the end is invoking funTwo, then passing it to funcOne?
``````
4 Likes

When we pass in a higher order function, it is by reference, not by return value. We want to invoke it only once it is inside the other function’s body.

`````` > foo = (func, val) => `\${func(val)} \${`a constant`}`;
<- (func, val) => `\${func(val)} \${`a constant`}`
> bar = (val) => `a variable \${val} \${`a literal`}`
<- (val) => `a variable \${val} \${`a literal`}`
> foo(bar, 'something')
<- "a variable something a literal a constant"
>
``````

Convoluted, yes, but it shows how the inputed function is invoked as part of the return value of the other.

The weirdness is the Chrome console.
`>` input prompt
`<-` response

When working in the console I don’t use `const` or `let` at global level so changes can be made to the functions without having to refresh (and lose everything we have in the console).

2 Likes

Thanks for the reply mtf. I’ll be honest, I’m still not getting this one lol. Difficult concept to initially grasp?

3 Likes

Or you need a better example. Dig around for some examples online, and ping this topic when you have some to discuss. You’ll get through this if you don’t give up.

5 Likes

Hey there. Okay, I think I’ve figured something out.

Codecademy snuck in callbacks without me realising it ; My understanding of callbacks is terrible.

To Google I went! Maybe I’m crossing wires somewhere with callbacks and HOF’s.

This snippet from Stackoverflow highlights the confusion perhaps. I don’t see a difference in these two explanations:

A higher-order function is a function that takes another function(s) as an argument(s) and/or returns a function to its callers.

A callback function is a function that is passed to another function with the expectation that the other function will call it.

2 Likes

Awesome what a little ferreting can come up with…

Now you see that the example is a callback. And, you know the difference between that, and a factory function.

``````function ab(a, b) {
return a * b;
}
function slopeFactory(f, m, b) {
return function (x) {
return f(m, x) + b;
}
}
``````

Now we can create specialized functions…

`````` > slopeOneOrigin = slopeFactory(ab, 1, 0)
<- ƒ (x) {
return f(m, x) + b;
}
> y = slopeOneOrigin(1)
<- 1
> slopeHalfOrigin = slopeFactory(ab, 0.5, 0)
<- ƒ (x) {
return f(m, x) + b;
}
> y = slopeHalfOrigin(1)
<- 0.5
>
``````

Both outcomes are as expected. We took a function that looked like this,

``````g(m, x, b)
``````

and came out with,

``````f(x)
``````

where `m` and `b` are constants.

You might not understand jQuery, but this is an example of a callback in action as an event Handler

``````function changeText (event) {
let value = \$(event.currentTarget).val();
\$('.preview').text(value);
}
\$(() => {
\$('#text').on('keyup', changeText);
});
``````

The function does what it says, changes the text content of a jQuery node element.

The latter is a jQuery wrapper (think, closure) that registers the `keyup` event on another jQuery node element. The second argument of the `on()` method is the callback.

Notice that we only pass a reference to the function, and the listener invokes it on the `event` object. `currentTarget` is the screen element that triggered the event.

3 Likes

Give me a few mins to make sense of that.

Ever feel like you’re juggling 3 knives, and trying to add a fourth?

That’s what trying to keep the logic of those functions in my head is like!

4 Likes

Don’t sweat it. I piled a lot on, and there is no way anybody is going to expect you to come up with stuff like this. Just know that you eventually will, on your own in due course. (I just did.)

Intuition comes from grinding away at fundamentals. Work at the level to which you have reached, and slowly rise to other challenges as you increase your knowledge and skill base. It does not happen overnight, and all the examples like above will never make anybody a programmer. It’s what we can garner from just reading them that matters, so we instill thinking patterns, and object recognition.

This coming from a non-programmer, per se, but a student of the art, all the same. Admittedly I have some skills, but also must admit to constantly having to refresh with renewed searches and syntax checks. Seems the old memory is not what it once was. Thank heaven I at least still recognize the concepts.

Appendix

Notice how our factory is handed a number of constants. In this case one is a callback, the other two are literals. Study how similar the scenario is to the event handler example. They both have a callback function. The only difference is that one is immediate, and one is stored for a later call. Well, there is another difference… Only one is an event handler. The other is a callable function. We would not call an event handler except through a listener.

There I go again, adding another knife to juggle. Pardon me. Proviso being, don’t try to get this all in one bite. Come back to it as many times as you must to get the overall gist. It might take until you get into jQuery on your learning path, but should only really take until you cover events in JS. We can intuitively work out the syntax variations by then.

Needless to say, working with higher order functions can greatly elevate our game, once we realize it is not a game. We wouldn’t do this if we didn’t have a better reason than just slope equations. Kind of like this little creation, though. Not bad for a session’s work.

We can examine class objects as a way of embedding the same sort of functionality in object instances. That would be a whole 'nother story. Here we are giving immediate results from a factory produced callable function.

We cannot be certain that you are clear on the concept of slope, so please fill us in on that. Thanks. I’d like to go more into those functions but must not overstep your limits.

Even more edit

What’s not so evident is that we can pass any function to this factory. That’s worth another ‘ball’ to the juggle.

6 Likes

Firstly,
I see what you did there, clever

Also, I’ll be going out to work in a moment. I just wanted to confirm that i’ve read this.

Haven’t taken it all in yet. Or understand it all (as you say, that will come with time). But, when i’m back from work, I’ll look at it again, and get you an update on it.

Once again, thanks for taking the time and having the patience to go through this. It definitely feels like this logic is a step from making simple loops etc with basic javascript to … erm, I lack the eloquence at the moment, but i’m sure you get the gist haha.

Have a good day o/

4 Likes

There isn’t anything too crazy going on here.
Functions are values that can be called.
Since they’re values you can pass them around same as if it was an array or a string.

4 Likes
2 Likes