Declarative & Readable Code

[00:00:00]
>> Will Sentance: How was this all possible, and we already saw hints of this from Michael's question, from multiple other questions. How was this possible? How am I able to pass in function code, function as an input to another function? As we said, in many languages, this violates our idea of what declaring or saving a function even is doing. Not in JavaScript, because in JavaScript functions are first-class objects.

[00:00:29]
That means they have all, they are just objects. Now they have extra ability, the ability to be called, to be invoked, to be run, but they are just objects. Therefore, they can be treated and coexist with any other object, they can be assigned to variables, we'll see in a moment the ever more popular style of declaring functions that actually does involve assigning to a label. We can assign them as properties on other objects, where they're known as what, Chris, what's a function on an object known as?

[00:01:02]
A function on an object is known as a method. Dot, don't, do not fear. We can pass functions in as inputs. We know we can pass an object in. Nobody's worried about passing an object, if we declare an object into, we can declare an object, we know we can pass an object in to another function. We can also pass functions in as inputs to other functions. And then finally, the fact that functions are just full on objects that we can pass around, we can move around our code, also means we can return them as output values.

[00:01:43]
Here we returned out an array, we can also return out a function as an output value from another function. When we do that, we get the most obscure feature of JavaScript, known as closure. And that's what we'll see after this, but first, let's identify which of these was our higher order function, our most profound of constructs. Surely we had to declare it with a special keyword to say there's a special higher order function.

[00:02:18]
And which of these was our callback function? Austin, what do you think was our higher order function, a grander function? I think it's copy array and manipulate. And what do you think was our callback function, our little baby function that can be passed in? That'd be multiply by 2, that'd be multiply by 2. Our higher order function, the outer function that could take in another function, or, as we'll see, return out.

[00:02:44]
Either take in or as we'll see, return out, another function, and our callback function is the function we insert in. Now, as I say, I don't know if I love the term callback function here. We're going to see later on that there's a whole realm of JavaScript, where we are passing in another function, and it's called the callback function, because it's going to run, be called back, it's going to call you back, call us back, come back much later.

[00:03:14]
Here, our multiply by 2, our callback function, was run directly inside copy array and manipulate. They are still called higher-order functions and callback functions, but you could also call our callback function here a handler, it's handling what to do to each element, you could call it some sort of transformation function, it's doing the transformation, an argument function. We'll see that often in languages, especially where we pass them in without a label, they're called lambda functions, but they're still technically called callback functions.

[00:03:46]
I just think it's a strange name because that suggests that they come back later. No, no, no, they run right there. In asynchronous JavaScript to come, before the end of this marathon that we're doing together, we will see functions that very, very much get passed into another function, and they disappear off to be called back later on. But that ain't here. OK. So higher-order functions, takes in a function, passes out a function, it's just a term.

[00:04:16]
We didn't need to declare, copy, array and manipulate with a special type of function, expecting another function. Just does it. Nothing intrinsically different about them. But callback and higher-order functions, they simplify our code and let us keep it, do not repeat yourself. We get more declarative and readable code, even here, and you wait till we see this tidied up a little bit, even here, I got to describe what I wanted to have happen.

[00:04:48]
Compare this innards of copy array and manipulate, where I'm picking each element, making changes to it, new app, this is very imperative style, step-by-step how to do it. Instead, I got this very readable style. What do you want to have the output of this line be? I want you to take this data, copy array, and manipulate it via this transformation. I want you to take this data and multiply each element by 2.

[00:05:14]
It's far more readable. Look at the innards of that function. By the way, declarative code is never in under the hood of any declarative code, there has to be some imperative code of how actually to do it. Declarative code is just when you're using it, it's far more readable. So in this case, you are copy and manipulating this data by this change to each element, that is far more readable potentially, and especially when you use other ones like filter or reduce, than handwriting what to do with the data.

[00:05:46]
These are very popular in interviews. And they are the backbone of asynchronous JavaScript, which is what makes JavaScript so powerful and popular, why it's so important, because it is the language of the web. Of doing lots of work at once, especially talking to many other computers, where callbacks are a vital part of that pattern. They sit under promises, under async await, and all of these portions.