در حال بارگذاری ...

Arrow Function Basics0:00

Okay, let's talk about the new arrow syntax, which is really cool. So I'll give you an example. Let's say you have some kind of collection of tasks, whatever the task might be. And we'll say when you initialize this class, you're going to pass in an array of tasks, and we'll default to an empty array. All right? Next, maybe you have a little log method that will just cycle through each of those tasks and log something to the console. All right, well, you could say this.tasks.forEach. I'm going to use the old function keyword here, and then I will console.log the task. Okay, so let's try it. I'm going to new up a TaskCollection. I'm going to feed it three new tasks, so we'll need to create that in a minute. And then finally, I'm going to call log. Okay, so right now we're getting a reference error, but only because you don't yet have a

so we'll need to create that in a minute. And then finally, I'm going to call log. Okay, so right now we're getting a reference error, but only because you don't yet have a class called Task. Now we do, and all that works. Great. So what about this arrow syntax? Well, take a look. This function keyword can be removed entirely, and we can replace it with the arrow, like so. So if I save that, we get the exact same thing. But further, in this case, we only have one argument, so if that's the case, I could even omit the parentheses as well. If I save it, we get the same thing. And then finally, in this case, we're just doing one action, so we're not going to have multiple lines worth of logic. That means I could put all of this on its own line, like so. And once again, if I save it, we get the exact same thing. So how cool is that? It can really simplify and clean up your code. And now look, if you're

Styling Arrow Functions3:05

approach is exactly what I said to you. If I have a single argument, then I won't use parentheses. Otherwise, I always do because I have to. Next, I only use this single inline approach if I'm just doing something very, very simple. Otherwise, I will add the curly braces on and put this on its own line. So imagine you had something like this where you wanted to prepare it. And then here, maybe you have a method, for example, with Laravel Elixir. I have a method called toGulp, and that basically creates the Gulp task based upon the properties on the instance. You don't need to know about any of that. But we'll just say console.log converting to Gulp. Okay, so maybe you want to say filter through all the items in the array and prepare them or convert them for Gulp. All right, well, now I could say this.tasks.forEach task => task.toGulp. Nice and clean there, right? So if we run it, we get exactly what you would think.

Arrow Functions and this3:53

them for Gulp. All right, well, now I could say this.tasks.forEach(task => task.toGulp()); Nice and clean there, right? So if we run it, we get exactly what you would think. Now, this is all great, but there is one thing you should consider. The value of the this keyword is handled differently. So for example, let's do this. For each task, I'm going to console.log(this). Now, here's what I want you to note. In this case, the this keyword refers to, as we would kind of naturally expect, the task collection instance. But now, do you think that's how it worked before using the function keyword? Let's see. function, save it, and no, we get undefined. Now, here's the deal. In this case, we do have strict mode automatically enabled. So what we see here is what you would expect. However, you also might be used to seeing the global window object. So for example, if I just had a single function like this,

Implicit Return Examples6:18

mind that the return keyword is implicit. So you don't have to do anything like that. It will automatically happen. For example, if I had, in a new example, if I had Taylor, Jeffrey, Adam, Matt, and we just wanted to filter through them or map over them, yeah, the old way would be names.map. And then for each one, we'll say return name plus equals ' is cool'. Very mature. Okay. So if we reassign that and I console.log that, sure enough, we get the modified array, right? But now with our new syntax, I could remove the function keyword and then replace it with an arrow. Next, I only have a single argument here, so the parentheses are optional. And then finally, I can put this all on its own line with the understanding that the return keyword is implicit. So I could remove that as well. And if I save it and reload, I still get the exact same thing. Much, much cleaner stuff.

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟