Deep JavaScript Foundations, v3

Function Expression Solution: Arrow Functions

Kyle Simpson

Kyle Simpson

You Don't Know JS
Deep JavaScript Foundations, v3

Check out a free preview of the full Deep JavaScript Foundations, v3 course

The "Function Expression Solution: Arrow Functions" Lesson is part of the full, Deep JavaScript Foundations, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Kyle live codes the second part of the solution using arrow functions.


Transcript from the "Function Expression Solution: Arrow Functions" Lesson

>> Kyle Simpson: Let's talk about part two of the exercise. So if we're starting from this as our solution, we can start to convert these regular functions that are declarations or expressions into arrow functions. Using the various things we know about error functions syntax. So for example, get students from ID could be created as getStudentFromId, and it's gonna taken that.

And it's going to return the student studentRecords.find(), and here's another function expression that we wanna do with an arrow function. So that one is record, and then this expression. And that's how we find it. So, that's our definition for the arrow function as compared to the stand alone function.

We'll do the same technique with print records.
>> Kyle Simpson: And rather than making a function block, I can actually see that all three of these functions are chainable. Since sort will retain the array and since the array will be a local array, the mutation won't matter in this particular case.

So I can take advantage of that by simply saying, and then I can say .sort. And here, we have another function that we should convert to an array function. But this whole If, else, if thing can be done as a ternary, so we don't need a function body.

So let's write it as the arrow function that takes in record1 and record2. And we will use a ternary and I will write it all on one line because why not. That was a joke, you were supposed to laugh at that. is less than, then we return -1.

Otherwise ( >, we return 1 otherwise 0. So that's our error function that we called the sort on. And then finally we call the .forEach, and again, we have this Function which is receiving a record and calling console log. Since console log is a function call, it's suitable as an expression which means we don't need an arrow function body.

So we can simply say record and then call the console.log, and, since I'm lazy, I'm just gonna copy it. I don't wanna retype it.
>> Kyle Simpson: And there is our arrow function representation of print records.
>> Kyle Simpson: Paid students to enroll
>> Kyle Simpson: It doesn't receive anything, so it's an arrow function.

And again, I can see that what I'm ultimately doing is returning an array. So I can just simply return that array, and then have Included in the array what's going to happen through chaining. So, that and I'm going to spread out this expression. And this expression will start with studentRecords.filter and here we are with another online function expression that can be arrow function.

So I'll write an arrow function. Takes in record and since I'm being lazy, I'm gonna copy that. There's our arrow function. After filter, we can simply call the dot map, change directly off of it. We have another inline function called, "Get student I-D". It simply returns record. This is everybody's favorite arrow function which just does that.

And that array then gets spread out. It's a list of I-Ds that gets spread out into this array that's returned from paid students to enroll. So there is our arrow function.
>> Kyle Simpson: And now, finally, remind unpaid is an arrow function that takes record IDs and it Does recordIds.filter, and we have a student ID arrow function or parameter called studentId that comes in.

And we can, again, avoid needing an arrow block by doing a property chain off the function call. So we can simply say, getStudentFromId(studentId), and then access the property off of that call, and negate it. And then, we can call printRecords
>> Kyle Simpson: With that input.
>> Kyle Simpson: So there is that arrow function, and yay!

No more regular functions, only arrow functions.
>> Kyle Simpson: Any questions about part two of the exercise?
>> Kyle Simpson: Yes?
>> Speaker 1: There was a moment with the multiple ternary as the callback function, the chained array method, it's like-
>> Kyle Simpson: Yeah, the one that I put all [CROSSTALK]
>> Speaker 1: I was like, surely that's just a rhetorical gesture that he created inside.

Then I realized, I had written something like it two weeks ago. I was like, God.
>> Kyle Simpson: Yeah, I know, my observation of those that like to write arrow functions is that there is a predisposition to use the most concise syntax possible, using whatever tricks you possibly can. Including Inline ternaries that are nested together, using the comma operator to nest expressions.

I've seen people define parameters in the arrow parameter list that are unused variables so that they don't have to declare a variable to use inside of their expression. I mean, any sort of syntactic trick you can use to get it down to a concise arrow expression seems to be the norm.

>> Kyle Simpson: Okay, so hopefully you now feel a little bit more with some slightly more real worldish code. Some idea about the differences between the functions that we can create as declarations, as inline function expressions, and now even as arrow function expressions. You have some side by side comparison that you can make.

Make your own determinations on whether or not these styles are more readable, or more maintainable, for your purpose.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now