Deep JavaScript Foundations, v3

Function Expressions

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 Expressions" 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 defines and analyzes function expressions in relation to scope.

Preview
Close

Transcript from the "Function Expressions" Lesson

[00:00:00]
>> Speaker 1: We've been talking about functions in the compilation phase, adding their identifier as a colored marble in the enclosing scope. In this example, we have a function teacher on line one, what color marble is teacher gonna be?
>> Speaker 2: Red.
>> Speaker 1: Red, okay. But let's look at line three because line looks a little bit different.

[00:00:21]
And line three might look a little bit more like some of the functions that you've seen more commonly. It's maybe a little less common to see the old school function decoration, although I strongly prefer function decorations just for the record. But most people seem to like these days to declare variables and assign functions to them and usually they even use a constant instead of a var.

[00:00:43]
So that might look a little bit like what you've seen recently. So what's happening there and is it any different than what's happening with line one? Well, remember, there is a difference between what can happen at compile time and what can happen at execution time. So, we do know that an identifier called myTeacher is going to be created and what color marble is it gonna be?

[00:01:04]
>> Speaker 2: Red.
>> Speaker 1: It's gonna be red. We do know that there's a function called anotherTeacher there, so we need to create a bucket for it at least. We need to make a blue bucket. But because that function is not a declaration, we're not gonna handle its marble color in the same way.

[00:01:22]
The key difference here is that the anotherTeacher identifier, the one right here on line three, that identifier is going to end up as a marble at compile time but it's gonna be a different colored marble than you expect. It's not a red marble, it's a blue marble. So there is a key difference here.

[00:01:40]
This is called a function expression as opposed to what line one is, is called a function declaration. And one of the key differences, and we'll see more throughout the course but one of the key differences between function declarations and function expressions, is that function declarations and their name, they attach their marble to the enclosing scope, so we make a red marble on line one whereas function expressions will add their marble to their own scope.

[00:02:12]
>> Speaker 1: So the blue scope is where the blue marble anotherTeacher ends up.
>> Speaker 1: That's why on line four, we can reference in anotherTeacher because there is in fact a blue marble called anotherTeacher. But down on line nine, there is no anotherTeacher, is there? When we're out in the global scope and we asked global scope you ever heard of this red marble, it's gonna say nope, never heard of that red marble and what we're gonna get there, reference error.

[00:02:41]
So key difference, function expressions, put there identify your into their own scope. There's a little nuance. Let me get to that question in a moment. There's a little, also, additional nuance which is not only does that blue marble show up in the blue scope but it's also read only.

[00:03:00]
You cannot reassign anotherTeacher on line four. You could not reassign it to some other value. You have a question, yes?
>> Speaker 2: Why would you do this? Why would you actually have the named function on the right side of that expression?
>> Speaker 1: You've probably more often seen it as an anonymous function there, and we're about to discuss the difference between what are so-called named function expressions, and the more common anonymous function expression.

[00:03:24]
Okay, so we'll get into that in just a moment. So great segue, let's talk about named function expressions. What is a named function expression? We're super creative, that means a function expression that's been given a name, okay? So let's look at these two. Line one, I'm declaring a function expression.

[00:03:43]
Why is it a function expression?
>> Speaker 2: It's assigned to a variable?
>> Speaker 1: Because it's not a function declaration, how do we know if something's a function declaration if the word function is literally the first thing in the statement? So if it's not the first thing in the statement, if there's a variable or an operator or parentheses or anything, then it's not a declaration, it is?

[00:04:09]
>> Speaker 2: An expression.
>> Speaker 1: An expression, so on line one, we see a function expression, but we see no name. So that's called a anonymous function expression, whereas the one on line five is a named function expression. So setting aside the difference between function expressions and declarations for a moment.

[00:04:27]
Here, I just wanna focus our attention to the difference between anonymous function expressions and named function expressions. And what I'm gonna claim is that even though anonymous function expressions are vastly more common, vastly more popular In fact, most of you have maybe never even seen a named function expression.

[00:04:48]
And that's how uncommon and unpopular it is. I'm going to make the claim that you should always, 100%, zero exception. I don't make very many statements that are that absolute, 100%, zero exceptions, you should prefer the named function expression, over the anonymous function expression.

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