Getting Started with JavaScript, v2

Function Expressions

Kyle Simpson

Kyle Simpson

You Don't Know JS
Getting Started with JavaScript, v2

Check out a free preview of the full Getting Started with JavaScript, v2 course

The "Function Expressions" Lesson is part of the full, Getting Started with JavaScript, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Kyle defines what a function expression is and then performs side-by-side comparisons between named and anonymous function expressions to argue that naming increases readability.

Preview
Close

Transcript from the "Function Expressions" Lesson

[00:00:00]
>> Kyle Simpson: All right, let's look at function expressions. We know what functions are, probably. At this point, you've seen enough functions in your programs that you get the idea. It's a collection of some behavior, maybe it's computing something. What specifically is a function expression? Well, a function expression is a function that is assigned as a value somewhere.

[00:00:20]
This may be a little strange, maybe a little new to you, to think about functions not just as behavior that we call, but the functions themselves are actually values. And that means they can be assigned to variables, or they can be passed as arguments to other functions, or they can be returned from functions.

[00:00:39]
We so-call this a first class value. A function is a first class citizen in the language. It's a value that can be passed around. Just like the number 42 or the string Kyle can be passed around or assigned, so can also our functions. So any function that is being declared and assigned to a variable or a property, or it's past, it's gonna have this label of a function expression.

[00:01:03]
So let's look at some examples of those.
>> Kyle Simpson: Here's a function expression that's getting assigned to a variable on line one. It doesn't have a name in the function expression, but it gets assigned to a variable called clickHandler. And then, on line five, I have another function expression that's getting assigned to a variable.

[00:01:22]
And this time, that function expression does have a name. It's called keyHandler, and it's assigned to a variable of the same name, keyHandler. So these two function expressions have a slightly different term if we're trying to discuss them in very specific detail. The one on line one, we would call that function expression an anonymous function expression.

[00:01:44]
And then, if we see keyHandler, the function expression that's on line five, because it has a name we call it a named function expression. So just real briefly, I wanna talk about a couple of reasons why you should be aware of the difference between named function expressions, like line five, versus anonymous function expressions.

[00:02:03]
By far, you will more likely have seen more of anonymous function expressions in the code that you've written and that others have written. But I'm gonna make the case that you really should have all named function expressions, if possible.
>> Kyle Simpson: So here's some examples of function expressions, where they are anonymous versus named.

[00:02:23]
And I'm gonna make the claim that the arrow function that we see on line one, you do have to kind of read its function body to figure out that it's extracting the ID property. But on line three, we see a function expression that tells us in its name exactly what it does.

[00:02:39]
So one of the reasons why I prefer name function expressions is because their descriptive name tells us what they're doing.
>> Kyle Simpson: The same is true if you're writing, for example, promise chains. I know promise chains are common in a lot of people's code base, and it's very common that you do these sort of anonymous arrow functions in your promise chains like we see on line 10.

[00:03:00]
And yes, you can figure out, you can infer that we're getting some data from a person, but you have to read that getData person ID expression to figure that out. Whereas on line 14, the name says getting the data from the person. It's almost like it reads as an English statement.

[00:03:21]
So I'm not a big fan of arrow functions personally because they fall under this kind of heading of being anonymous function expressions. And I would far prefer there to be a name on the function expressions. And I know it's a difficult habit to break because I still have this problem where I write function open parentheses, or sometimes I'll think that maybe I should just write an arrow function.

[00:03:43]
But I often have to step back and say wouldn't it be better for me have a descriptive name to tell the reader of my code what the real purpose of this function is? I don't want them to have to figure it out on their own. I would like them to be able to just read the name and know exactly what it's for.

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