Callbacks & Higher Order Functions

[00:00:00]
>> Will Sentance: All right, people, we are gonna keep going to see how this is even possible. We started hinting at it, I think actually, honestly, from Dan's question, how is it even possible? Well, in JavaScript, functions are what's called first class objects. That is to say that they have all the features of objects.

[00:00:19]
First class just means, they have everything that objects have, they have too. They're full features of objects, meaning they can be treated just like objects. We know that there's no problem of passing. Suppose I declared an object, I don't know, like this. If I declared an object, there it is.

[00:00:39]
I'd have no problem passing that as an input. Behind the scenes by the way, arrays, we're gonna see later on are just objects. By the way, behind the scenes, functions are just objects. Behind the scenes in JavaScript meaning they can do all the things that objects can do.

[00:00:53]
We can assign them to variables. We're gonna see in a moment that's gonna create a particular way of saving functions that is more and more popular. They can be stored as properties of other objects where they're known as, what do we call function stored as other properties of other objects?

[00:01:10]
Methods, exactly. They can be passed as inputs, as arguments, into other functions, by the way, by reference back to where they were born, exactly as Dan raised. And we're gonna see this afternoon, to me the most elegant, sophisticated, beautiful feature of JavaScript. That they can be declared, saved inside of the running of another function.

[00:01:32]
Not used there, but instead returned out. And that gives us what feature of JavaScript?
>> Speaker 2: Closure.
>> Will Sentance: Closure, exactly, closure. All right, so, which of these is our higher order function and which of these is our callback? These slides unfortunately have the answer, don't read them. But let's turn to Adam because he, Adam was our earlier expert.

[00:01:55]
Is it copy array and manipulate or is it multiplyBy2. Adam, which is our higher order function?
>> Speaker 2: The copy array and manipulate.
>> Will Sentance: And which is our callback function, Brayden?
>> Speaker 2: MultiplyBy2.
>> Will Sentance: MultiplyBy2. Yeah, the outer function that takes in a little baby function, that's our higher order function.

[00:02:17]
The function we insert in is our callback function. And that's it, people. I still remember when I first encountered these thinking so profound. But this is our high order function. Any function that takes in, or by the way returns out a function. Just a term describe each function.

[00:02:36]
We don't need to, you can imagine a language where we need to declare it as being a higher order function. So it's ready to receive other functions. Not in JavaScript, no problem. In JavaScript, any function that takes in a function or returns one out automatically is a higher order function.

[00:02:52]
There's nothing inherently different about them. Okay, so high order functions and callbacks, they keep our code far more dry. Don't repeat yourself. We wrote one time. Look at this, one time, copy array manipulate, and then when ran it, that's when we determined what specifically we would do with some of the code.

[00:03:11]
That's really special, the idea that we can edit a function after we've saved it, because we left a little bit of it blank. And not just edit it with what data we're gonna have in there, but literally edit its code. That makes our code saved profoundly more reusable.

[00:03:28]
We can use it in so many different situations. We could pass in divide by 2, we could pass in add 3, anything we want. This ensures that we can write more declarative, more readable code as well. Have a look at what this function down here, copyArrayManipulate. They tend to call is not that, but what, everybody, what do they call this function usually?

[00:03:48]
>> Speaker 2: Map.
>> Will Sentance: Map, exactly they call it map, it means take some data through some mapping functionality, some way of changing that data. Create new collection of data with each of those elements change according some function, in this case, multiply each of them by 2. That is a very readable line of code.

[00:04:05]
In reality, we need to understand how it's built under the hood, but we ain't writing that, we're just using it most of the time. Meaning I get to write here map this data by this transformation function, multiply each element by 2, that's pretty readable. Versus if I were doing it like that.

[00:04:19]
Have a look inside that function, that's what I've had to write in the old days, in the imperative style. Instead I declare I wanna filter or map this data by this condition. Sorry, in this case, this data by this mapping function. That makes for very readable code. It's a core part of functional programming and more generally declarative programming.

[00:04:37]
Declaring what I wanna have happen. Say, I wanna map it, and it happens, beautiful. All right, it remains a key part of interviewing, whether for mid-senior level job interviews. And the notion of passing in a function to the running of another function in a very different way, is gonna turn out to be the backbone of a synchronous JavaScript.

[00:05:05]
Even if we're using promises, even if we're using async await behind the scenes, passing in a function to another function is gonna be core to those concepts.