The Hard Parts of Functional JavaScript

Arrow & Anonymous Functions

Will Sentance

Will Sentance

The Hard Parts of Functional JavaScript

Check out a free preview of the full The Hard Parts of Functional JavaScript course

The "Arrow & Anonymous Functions" Lesson is part of the full, The Hard Parts of Functional JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

Will describes how to write anonymous functions, how to write a function using an arrow, and cautions about the thinking that writing anonymous functions improves code readability.


Transcript from the "Arrow & Anonymous Functions" Lesson

>> Will Sentance: We are now going to continue into, arrow and anonymous functions. This is not like the other sections that I've taught today. You can put your laptops if you want. It's not like the other parts of our talk today which are more in-depth pieces of our functional programming world.

This is closer to an interlude. A few things that I want to make sure you're on top of, they're not going to cause confusion as we go into more and more of these sophisticated pieces of functional programming. So there we have an arrow function, you recognize it, we've all ready got pretty used to it at this point.

Parameter in the parentheses. As a pace holder that when you end up running in this case, multiply by two, it gets filled in with the argument two and then return back to two. But where the function has only a single thing to do which is gonna be done and then returned, which is what multiply by two does when he's only got a single thing to do.

JavaScript now allows us to do a shorthand version of this, where there's no other code in the body of the function besides the return key word followed by the thing that's going to be outputted. Single expression, what an expression of thing that's got to be turned into a value to be outputted can be returned out.

We can actually, well, firstly we can put it all in one line. Don't get confused by me putting the multiply by two on one line there. It's the same as any other function. I just put it all in one line. Well, if I can put it all on one line, JavaScript designers you know what we'll help you out.

You don't need the curly braces we know that's probably the body of the function. And you know what even you don't need the return keyword if you can put on one line will insert the return keyword for you there. We know it, you'll know it's there. That means that this second line here, multiply by two input or parameter of input Is actually saying return input by two.

But it's identical to the line before. Nothing has changed. Just a slightly shorthand way of writing it. Inserted, what what's the word we've inserted there, Sam before input by two or what's the word the JavaScript asserts. They're automatically
>> Sam: Returned.
>> Will Sentance: Returned. Okay, I'm going to actually diagram this for a second just to make sure we're truly on top of this, but note even here we can even remove the parentheses if there's only one placeholder parameter expected input.

And we get this very clean looking syntax, syntax meaning wording of the function, but only if the thing is any different I don't want you to think that that's some magic, I don't know, I think it's any different. It's just I'm gonna walk through it, just to make sure.

By the way, each of these is a separate file of code. So you don't think I'm gonna be overriding, multiply by twos. Let's go over here. These last two lines here, Sam, help me out. Line one there, simply as possible, what am I doing in line one?
>> Sam: Declaring multiple over two.

>> Will Sentance: As a?
>> Sam: As a constant.
>> Will Sentance: As a function. Yeah, totally. Yes, it's a constant is a label, but let's just call it a function. Let's just stress to ourselves this is just a function, declaring the function multiplied by two. Okay, so I'm gonna do a little mini memory over here declaring the function multiply by two.

There it is, as my left has ever, I'm going to actually put in what the parameter is. I like to do this sometimes input and then the output is input by two. I know it's very small writing, but we're not really looking at it closely. There it is, okay, saved.

Next line, Virginia.
>> Virginia: Declaring a label output.
>> Will Sentance: Yep, and we've got to go off and run. What Virginia?
>> Virginia: Multiply by two.
>> Will Sentance: Exactly multiply by two with what argument?
>> Virginia: Three.
>> Will Sentance: With the argument of three. Creating a new,same as usual, Virginia what?
>> Virginia: Execution context.

>> Will Sentance: Execution context. There it is. Into we go, what Virginia is our parameter, our placeholder it into which we're going to fill our argument?
>> Virginia: Input.
>> Will Sentance: Input, and maybe no grands, there maybe no keyword function, but it still is a regular function. Input to which we are assigning, what Jasmine?

>> Jasmine: Three.
>> Will Sentance: Three. What then is the body of our function? What keyword sum is inserted automatically for us?
>> Sam: Return.
>> Will Sentance: Return input by two that's what's really there. I'm sure I'm gonna have you that's what's really there. Input by two is three by two six return it out into

>> Will Sentance: Output
>> Will Sentance: Bit of an interlude right? This is just, this is not call learning. I wanna make sure that nobody is looking at that arrow function and its very short version with its implicit return. Implicit means we're not stating, it has been done for us, and thinking it's something magical.

No, it's a function like any other. Okay? That's really stressed. Maybe you all knew that all ready. But I feel it causes a lot of confusion. Well, let's now use it. Okay, arrow functions, by the way they fit our functional programming paradigm. Every line in functional programming is to bring it back to this is an independent, self contained, no other consequences, labeled piece of code where we know exactly what data it uses.

Well, if we only get it within a single line, it's gonna take in an input and an output and that's the only consequence. We're probably not doing much else on that single line besides taking input using the input in some way, and immediately returning out in the very same line, or the arrow function style kind of stresses that doesn't it right input output, same line.

Arrow functions that is condense our function so really stress that. Excellent. Okay, now, let's review our copy, array and manipulate. There it is idea for a minute. Well, there's copyright manipulate, there's multiple by two. And we called it with one, two, three multiplied by two. Let's shorthand it aha multiplied by two, same function.

Nothing's changed. Parameter, input. Return input by two. Take it in instructions is enabled for parameter input return input by two, meaning when I run instructions I'm really running with input as my parameter take in two and I'm running instructions, which turns out to be multiple by 200 running instructions with input.

Array position one is when we got showing here, which is the two instructions input of two, take in the two, as input and return two by two which is four out of instructions which is really multiply that number by two, okay? Stop me if this is not. Okay, right?

Not radical change.
>> Will Sentance: We can even insert the function that we insert into the higher order functions or that callback function. Multiply by two directly. That is to say anonymously, without a label. So, look, multiply by two, saved that code parameter input, body return input by two. And then just linked to it by name.

People love avoiding saving it by a nice English language name or nice to be a human readable name and inserting device name. They love to write it indirectly. Here's the problem with that and there's no problem with it if you understand what it's doing, but here's the problem if you don't.

You know what people think all the time to the point I've literally seen people go I thought reduced to five arguments because they think each of these bits is a parameter on. Copyright manipulates, as opposed to that portion from the word input through to number two. That is the code of a function that is just me putting in multiply by two the code of the function and inserting in, but now which color should we use now without a name.

We just inserted straight in and there it is. But given what label Anna do we use for the code formerly known as multiply by two, inside of copyright manipulate, they wouldn't label to be used right inside of copyright manipulate.
>> Anna: Instructions.
>> Will Sentance: Instructions. Meaning do we care about the label multiply by two?

Absolutely not. And that's all this is doing here. It's saying in the end the label multiple by two is only us to find the function to insert it in. Well, if we insert it straight in, then we don't need to go hunting for it by its name we just inserted right in.

And we're using instructions as it's label anyway. No change except readability, which to me goes down but not really. I mean, people use this technique all the time. We're gonna hold off from using it most of the time here today, because I think it makes getting on top of what's actually happening much harder.

I think it makes people think that that lines being sort of run right there and then is absolutely not, you're taking it and rather than saving it under a label to be run later on inside of here. I get that right. Instead, you're taking it and just inserting it straight in, but it's still ain't gonna be run until inside of copyright manipulate we see the referral to instruction from parends.

Then take that code and run it. But it causes I think a lot of confusion as why this is a bit of an interlude as I say to make sure that you're given the techniques to go and not look at other people's code and go, what the hell I didn't see that before.

Okay, folk, it's a bit of an interlude, thumbs on what I've shown you there, this direct policy in of the code, because we don't need a label for it because we never use the multiple by two enable insider anyway. We just use the code and if we're going to we only use the mobile Mattoon able to find the functionality we saved outside insert it in.

If we're inserting it straight in no need for the multiple by two label. Thumbs on this people you lost me I'm clear clarification people also clarifying you're sure. Okay. All right folks

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