Arrow Functions

[00:00:00]
>> Will Sentance: Before we go onto closures, I do want to do a few more pieces. I want to introduce us to the more contemporary style of writing our functions. In fact, here and multiply by 2 function, we're going to walk step-by-step through 4 different versions, all of which are legitimate, to the version that you might have used plenty, known as the arrow function style, that turns out otherwise quite syntactically, lots of words, heavy code at the top, into something that looks very legible, very readable.

[00:00:42]
Now, my—what would be the word, my—can my, the thing I say, that's my, not conviction, I don't know, my argument, there you go, my argument, but it begins with C, what's it called, my contention, there you go, my contention would be, and we're going to use the function keyword style for this reason, is actually, it's quite nice to know when I see that function keyword, this is code that I am saving, versus down here, where many a person, especially once we use this as an anonymous function being passed in as an input, will view this as being some sort of execution of code right there and then.

[00:01:26]
Instead, we're going to be confident that this is saving exactly the same function definition as the top. So let's actually walk through this line by line. We're not going to diagram this too heavily, but to say that, our first line there, let's have Austin, what are we doing in line one? You know, by the way, obviously this is, you know, we can't do all these things at the same time. These are all different separate files of code, but we're just making comparisons.

[00:01:54]
Austin, what are we doing in line one? Declaring a function called multiply by 2. Yeah, multiply by 2, with all of the function code in a left box. Next line, new file, what are we doing? Exactly the same thing. We're declaring the function, or in this case, the label, but it's a constant multiplied by 2. It has the input parameter, just as before, and it has the code of the function. We're just able to now assign it with this arrow function style, but we end up here with exactly the same thing as the line above.

[00:02:36]
But even that, but we saved ourselves using the keyword function. But even that for JavaScript's creators was too much writing. So in the next line, surely this line is doing something different. Austin, is this line doing something different? No, it's not. The next line, because it's the same line, it's the same, if you had multi line, you'd still need the braces, correct? Correct, because we only have, if we only have one thing that we're returning out, well, so we only have a return statement, we can even get rid of our curly braces and our keyword return, and JavaScript, when it runs multiplied by 2 in our third line version here, when it invokes our third line version here, it will automatically insert our return statement and return out input by 2.

[00:03:25]
But even that, people, is too much. If we only have one parameter, we can reduce our function definition to just our parameter name and then the return value, and we can define our function accordingly. That very last version there, if I call multiply by 2 of the input of 3, I will run this function, it will create an execution context, just like before. In fact, let's do it. Let's—our last function definition version here, and Tenzin, if we can do our declaration of output and our execution context, you can walk me through it.

[00:04:04]
So we've defined our multiplier by 2 here, let's just do it below, this is our new file. We defined our multiply by 2 with our last version here, and it looks just the same in memory. And we call, we declare output, and what are we going to do, Tenzin? We create an execution context. Beautiful, and we declare the parameter input with the value of 3. Yes, so our input parsing is 3, new execution context.

[00:04:41]
I know this is repetitive here, but there it is, and input exactly is set to 3, and then we do what? And then we return the value of 3 times 2. Excellent, and out comes 6. Nothing changed people here. And this is nevertheless a standard style of writing our functions. My conviction—yeah it works. My conviction is that this is often misunderstood when we see this. We see something that maybe it's running there and then maybe it's different.

[00:05:15]
Now we'll see later on that actually functions defined using this double arrow syntax do have a distinctive behavior. We're going to see that their implicit parameter assignment, fancy way of saying what does their this keyword point to, will be different, and in a very useful way. In a really, really usable way when dealing with calling functions inside of other functions, where we want to particularly return, refer to the object at hand, not to a certain global object.

[00:05:48]
So they turn out to be extra useful for that, but they're also, I guess, very useful because they just are easier to write and they look nice, and we're going to see. Here, let's use our new style of function declaration. The only thing I've changed here people is how I've defined multiplied by 2 as instead of being our function, input, parentheses, whatever, instead, but it's exactly the same, and we pass it in, exactly the same, and even more than that, people, we can actually pass it in directly.

[00:06:23]
You see what we're doing there? We're now passing input in directly, input by 2. Nothing has changed. This is exactly the same as when we pass and multiply by 2. But my goodness, does that look a little bit like we're doing something there in the line. We ain't. We're passing it in, running it, that function replaces instructions, we run it on array position 0, 1, 1, 1 by 2, brand new execution context, it ain't doing it in the line somehow.

[00:06:50]
It is creating an execution context when instructions runs, instructions is being fully replaced by that code, by that box, that box now, we're just not giving a name at all in global. We're just passing it straight in. Yeah, please, Ryan. Is there any performance difference in that, like that it has to save it to a constant and then—that's a great question, by the way, Ryan. I literally, last time, I shouldn't refer to a pre, but I, that question's been asked, you know, before, and I always say, at this point, you're—value, the biggest performance question around something like this is your time as a developer.

[00:07:31]
Like these are such minor differences that it's like shortening your variable name. Exactly, these are minor differences which in tech, as you say, might, if you did it across an entire, you know, codebase, might be something that was beneficial, but in practice the far greater bottleneck and performance focus is your time as a development team, and therefore always more important is the legibility and readability of your code.

[00:07:59]
But it's a question I love getting asked actually at this point. It's funny, that's literally the same question that was asked in V2 at this point. So either Ryan was here or is similarly astute, but I think it's a great chance to say something that I did want to say at some point, which is the most valuable asset in the development process increasingly is you as the engineer, and not certainly elements like this, minor performance improvements from variable assignment or constant assignment.

[00:08:26]
I want to show you something else here, people. So we can even pass and multiply by 2 directly without a name. This is closer to the lambda function style that is referred to in Python and other languages, but it's still just the code of the function being passed in. And we even get built-in version of our copy array and manipulate. What's it called? Anyone know, Chris, what's our copyright manipulate called in practice?

[00:08:55]
Map. Map, one of the most important functions in all of programming. Take some data, you have something you want to do to every element, it might be mathematics on it, or it might be displaying each element in the UI. Take some data, you don't want to change the underlying data, you just want to grab each element, do some work on it, and then you want to return out potentially each of the UI elements you want to display, or potentially all the new numbers with some change to them, don't change the underlying data.

[00:09:22]
Right, if you've got like data on some—I used to say tweets, it was the easiest thing to reference, but you know, data on some like, let's say, or Spotify songs or whatever, suppose you've got that, you don't want to change the list of songs, you want to produce a list of UI elements with each of those songs in. And that's the map function, so we have it built in, it's too important. So there's our renaming copyright manipulators map, result equals, and that already, look at the readability of that.

[00:09:58]
Map 1, 2, 3 via these changes to 2, 4, 6. Nice and readable, but we've got to know how it's working under the hood. We have a built-in version that allows us to take the array and using dot notation that we'll see much, much more about, allows us to run map and have the 1, 2, 3 inserted as the first argument implicitly, inserted as the data that's going to be worked on, and within JavaScript, then do exactly the same as we did with our handcrafted map.

[00:10:29]
These two are doing exactly the same thing, it's just that through the prototype chain that we'll see all of the under the hood to come over our marathon, the map function is available on the array to the right-hand side via the dot notation. All arrays get a whole bunch of these built-in functions where we can, yeah, Tenzin, where we can call the map function, add per end, insert the function we want to apply to each element to the right-hand side of the array, but nothing has changed, except that we're using the built-in version.

[00:11:03]
To be really clear. Tenzin, go ahead. Yeah, those last two lines. I thought I was—yeah, as I said, you heard me then sort of clarify, didn't you? Yeah. The first version, it's calling the one we built, the second version it's calling the built-in version. That's a really important clarification, Tenzin, thank you. The first version is the one we built. I renamed it map here, no problem, allowed to do it.

[00:11:28]
The second version is using the built-in version where that dot map, if I misspelled it, or I can't read, that's the built-in version available to all arrays. Where would we find our list of all the built-in array methods? Where do we find our list of that, Tenzin, normally? Documentation, exactly, MDN or of course nowadays, yeah, exactly, the new documentation. Excellent. So I now want to add something here.

[00:11:52]
I think I'm going to say it now. I just want to summarize first. So we have our anonymous functions. I didn't call it that explicitly, but the function we passed in without a name, we didn't define it separately as multiplied by 2, but just threw its code in, is known as an anonymous function. It ain't got no name. Simple as that. That makes our code more tight and readable, I will admit, especially for communicating.

[00:12:20]
I love to define my functions separately to show clearly their behavior. However, particularly in functional programming, you're going to often chain a series of tasks you want to do to some data. You probably are not going to define them all separately. You're going to instead have them be passed in directly as a series of tasks like we've done here, input convert, input by 2. But that does obscure exactly what's happening, and I encourage you to watch the functional programming hard parts to see how we can do these chains of tasks on data.

[00:12:51]
So anonymous arrow functions and built-in array methods improve our legibility. Our arrow functions here are just prettifying. They ain't changing the under the hood. They do in a particular way, which we'll see, oh yeah, we'll see their full effects later. Our built-in array methods are available after the dot on arrays. We'll see later how the heck that's possible. Firstly, has an array got properties on it?

[00:00:00]
We did hear something about everything being objects, but yeah, or, yeah, understanding how these are working under the hood is vital to avoid confusion.