This course has been updated! We now recommend you take the JavaScript: The Recent Parts course.
Transcript from the "Exercise 0 Solution" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Kyle Simpson: Rather than take a whole bunch of time to go through and type all of this stuff, I'm simply gonna walk you through the fixed version which is included with your exercises. Let's talk about a few things that are going on. First off. I've taken that if and made it into an arrow function on line one, I'll zoom in so it's a little easier to read.
[00:00:23] And you notice that the if the in the other one didn't have any variables in it, but I took advantage of being able to declare variables without statements by putting variable names as unused parameters in that iffy. And they're unused because down here at the bottom, the pair that executes it doesn't pass anything in.
[00:00:42] So those are the unused variable names that I can then start assigning to. So for example, I then open up my arrow function and I open up or print the c set because, I'm going to put multiple statements together or multiple expressions together using my comma operator. And because of the operator precedence of the comma operator, if I did that without the parentheses set it would bind less tightly than the arrow.
[00:01:08] So I have to wrap the multiple expressions that I'm gonna string together with commas in a parentheses set so, the first expression is I'm gonna say foo equals and I'm gonna make foo equals to another arrow function. The reason for that, is because in another expression down here.
[00:01:24] This one. Which is again part of that outer parenthesis set this expression calls foo. And then I set. So here, it looks an awful lot like a function body. But I'm using commas instead of semicolons, because these aren't statements. These are expressions inside of a comma list. Cuz it's so I wanted to get rid of my curly brace pair and all of that.
[00:01:43] So each one of these individual ones, is an expression rather than a standalone statement. So my foo function is an arrow, I take advantage of being able to declare my x but also to declare a y, cuz I'm gonna want that y the one that was in its own standalone declaration and then I want that y.
[00:02:04] So I'm going to use that y and I also use a trick that I haven't showed yet, which is default parameter values to go ahead and make the assignment of it instead of having to do a separate one. Now here's an interesting trick. I use a regular function and we'll come back to why I use a regular function here, but question for you is that a function statement or is that a function expression?
[00:02:25]
>> Kyle Simpson: Who thinks they know?
>> Kyle Simpson: The fact that I didn't get an immediate answer is kind of the point, cuz it looks an awful lot like an expression statement but, because it's part of a, because it is the concise body for an arrow function, it's actually a function expression or, it's a name function expression rather than a function statement.
[00:02:49] Anyway, I have a named function expression which is that is the concise body for that particular arrow function. It would've taken a z, but I also take advantage of baz and obj on unused parameters for my variable declarations. Now because I have a regular French function curly brace, I don't need to do any turn areas here.
[00:03:10] I can just do my regular if else but we're gonna, don't worry we're gonna use turn areas here in just a moment. I do need to do a return statement and I call my z.map, here's another case where I can use an arrow function. So I throw in my arrow function here.
[00:03:27] This is the arrow function, but I also assign that arrow function to a baz. Because assignment statements or assignment expressions, have the value that is assigned as the return. So I can assign and pass in the value all at the same time. That way, we're not having to have a separate statement.
[00:03:44] And the reason it needed to be named is because I needed to refer to it recursively by name, so I needed a name that the arrow function was assigned to. Now, down here these are regular old statements but, I now I use an arrow function. And this is my concise body again with parentheses around it and a comma operator to separate my two statements, and there is my this keyword.
[00:04:12] Taking advantage of the fact that this arrow function won't have its own, so it will come to this outer function to get this keyword. Finally I have to make sure to do my return obj. The rest of these should be pretty straightforward. Let's look at the setTimeout again I use an arrow function I use the open parentheses set here, didn't need any variable declarations.
[00:04:33] Because console.log is a function call, it doesn't need any kind of curly braces around it, because it's an expression call. So I can just simply have that as the body. And finally my reduce, my reducer, uses an arrow function. It's got two parameters. So I need to list both of those with a parentheses set around it.
[00:04:57] Now. The last thing I wanna point out about this exercise is, and this was the thing I messed up and it took me like 10 or 15 minutes to figure out why I messed it up. Cuz I had made this into an arrow function first. Seems reasonable. Why not if we're going all out.
[00:05:13] Let's go and make all these arrow functions, and I made the example and I still forgot the fact that you can't use a .call on an arrow function. Well you can but it has no effect. Cuz you try to bind the disc context of an arrow function. It doesn't have one.
[00:05:27] So it's just gonna ignore that .call that you make. So if you have a place in your code where you need to make a .call, or a a .apply, or a .bind or some, any one of the ways that you do with this binding on something if you need a thing to have of this binding.
[00:05:44] The trick here was I needed this thing to adopt it's this context from an outer scope, that had a this. But if the outer scope of this arrow function had been another arrow function, it would have had to just keep going up and keep going up. So you're gonna have to have it an arrow function inside of a regular function, if you want it to be able to adopt in this context.
[00:06:06] The point I'm trying to make is, you're not going to be able to replace all functions with arrows. And you're gonna have to be really careful about which ones can, and which ones can't, and under what kind of conditions. Now I deliberately made this big, and hairy, and messy just to illustrate all those different things probably your code isn't gonna be quite so bad, but you want to be careful as you're writing your code.
[00:06:30] Any questions? Looks like there's a question in chat. Can you explain lines 13 and 14 with the parentheses there? So this is an arrow function. It's got a concise body which we start on line 13 and finish on line 14. Because there are two separate assignments that I wanna make, first is object.length = 1 and the next one is object [O] = this.w.
[00:06:55] Those would normally be two separate statements that I would semi colon and put inside of a curly brace pair, but because I'm arrow functioning here I want to just use one parentheses set, because if I took off the parentheses. The comma operator binds less tightly than the arrow which would have meant, that only this would have been the arrow function.
[00:07:16] We wanted the whole thing to be the arrow function so, we have to bind the comma inside of the parentheses set. TO get that whole two lines to be the concise body. Hopefully that answer that. Any other questions that I missed and-
>> Speaker 2: Yeah this is along the same lines, can you just state what it is in JavaScript that makes it so, that you can just put a comma and turn to different statements into one expression, I think.
[00:07:43]
>> Kyle Simpson: The comma operator is defined as being able to do exactly that, which is to take, it's not two statements, it's two expressions that can be chained together. Any general place where I had foo(3) ; bar(4);. It's entirely valid JavaScript for me to do that.
>> Speaker 3: And that's not ES6, that's-
[00:08:08]
>> Kyle Simpson: That's JavaScript ES0. The comma operator. Like I said, when your ES6 arrow functioning, the thing you really wanna do as much as possible is pull out every kind of weird esoteric grammar trick that you can, to get rid of all the curly braces and semi colons and stuff.
[00:08:26] So, comma operator is a favorite of writing arrow functions.
>> Speaker 2: Can you explain the difference between expression and statement, just to clarify.
>> Kyle Simpson: I'm not gonna go fully into that. Check out my types in grammar book. I think it might be chapter five. I cover the difference between expression and statement.
[00:08:47] In English grammar, the English language grammar, the closest analogue is the difference between a sentence, which is a statement and a phrase, which is an expression. Sentences are made up of phrases. Statements are made up of expressions. But in JavaScript a statement can't be used in place of an expression, but an expression can be used in place of a statement.
[00:09:09]
>> Speaker 4: And do you go into that in your advanced JavaScript course?
>> Kyle Simpson: I do also cover that in the advanced JavaScript course here on Frontend Masters and in the types and grammar book.
>> Speaker 2: Another question, if the set time out is not returning any value, would it be a bad practice to use curly braces in the arrow function on line 12?
[00:09:29]
>> Kyle Simpson: Curly braces here. Would it be a bad practice to throw curly braces around it? Again, what you're gonna have is you're gonna have the ES6 police jump out of the shadows and scream at you. That you're supposed to be avoiding curly braces where ever you can. Sorry the curly brace would of been here.
[00:09:46] There's nothing grammatically wrong with it, but stylistically if you're going all in on arrow functions, usually you're gonna wanna go all in on arrow functions.
>> Speaker 5: The ES6 police.
>> Speaker 2: [LAUGH] So in your opinion, if you're using arrow functions at all for what they're intended for, would be that the replacement of the this operator in that instance.
[00:10:17]
>> Kyle Simpson: The place where it really actually was useful in my opinion was right here. That's where the arrow function was actually justified. All the other usages of it, I think are gonna dodgy. My own opinion. Yes?
>> Speaker 2: Another question from the chat room.
>> Kyle Simpson: We got an active chat room today.
[00:10:34] I love this, it's great.
>> Speaker 2: Well this is real stuff, right. Is baz as a named arrow function on line five.
>> Kyle Simpson: Baz a named arrow function, no. There's no such thing as a named arrow function. Baz is an arrow function, that gets assigned to the baz variable.
[00:10:54] That's what's happening on line five there is an arrow function here, the part that I've highlighted that then gets assigned to a lexical variable called baz, which was this one use parameter from line three. So it's just assigned to it. Would it have name inferencing? Yes. It would have name inferencing.
[00:11:12] So if we were to call out the .name property of it or if that were to have thrown an error in the console, then it would have said quote baz as the name of it. But there's no such thing as a named arrow function, there is such a thing as a name inference arrow function I guess.
[00:11:33]
>> Speaker 2: Follow up on that.
>> Kyle Simpson: So it can be a reference even when used as a parameter.
>> Kyle Simpson: I don't know what named reference is referring to here.
>> Kyle Simpson: No such thing in my opinion as a named reference.
>> Kyle Simpson: Thanks Mike. [LAUGH] ES6 police.
>> Kyle Simpson: If there's not a Twitter account for ES6 police, there should be by the end of my class, that somebody.
[00:12:07] [LAUGH]
>> Speaker 5: Is the type of arrow function in an object. That's what Ryan is asking.
>> Kyle Simpson: Is the type of arrow function an object? It's a function object just like a regular function is an object, it just has special syntactic rules to it. Few special behaviors to it, but from the perspective of it being an object, yes it's still an object.