• JavaScript

Functions are First Class

From the class:  JavaScript Functions

In this video, I'd like to give you a quick tour of functions and what make them special in JavaScript. We'll look at functions as objects and what it means for a function to be first class in the language.

Functions in JavaScript are objects. To understand that concept, in the console I'm going to create a new function, and I'll assign it to a variable called func. So to create a new function, I'll use the function key word, and then for this function we'll just have an empty arguments list and an empty body.

Now this kind of syntax here should remind you of object literal syntax. And if you recall, when we create an object using object literal syntax, we're actually creating a structure in memory for this object. And we're doing the same thing with this function declaration here, or this function expression.

So what we're doing is creating a new function in memory, and then we're assigning it to this variable with an identifier of func. So we can play around with this object in the console. We'll type console.dir and pass in the function as a parameter.

Then we can drill into it and see that it looks very similar to any other object. Namely, it has properties, and those properties have values.

We can even drill up into the prototype chain. So you can see this function object has a prototype pointer, and it points to the function prototype. And if we keep going up the prototype chain, you can see eventually we get to the object prototype itself.

And so function objects actually inherit from object.prototype. So we can call functions that we would call on a regular object on our function. For example, toString or hasOwnProperty.

But functions have some of their own special properties and methods that we'll look at it in other videos, like the call and apply methods and the bind method. So functions are just objects that inherit ultimately from the object prototype.

Since functions are objects, we can add new properties to them just like we can with regular objects. So if I type console.dir and we take a look at the function, you can see it now has a new own property called newProp.

Now even though functions are objects, they are also callable, of course. So we can use the parentheses syntax to call the function and get back a value. And then we can also use the call and apply functions, which we'll talk about in more detail in another video.

Next I'd like to show you around some function examples and introduce some vocabulary and concepts. The first concept is that functions in JavaScript are first class objects. So let's talk about what it means to be first class. Specifically, this means that a function can be assigned to a variable just like a regular data variable. So you can think of functions as data.

And in this case we're taking this function here, and we're assigning it to the variable with an identifier name of functionExpression. It also means we can take functions and pass them in as arguments. So we can assign them to variables, we can pass the functions in as arguments, and we can also take a function and return it from another function.

So in this case we're returning a new function from this outer function here. So we can return functions. So functions are first class objects in JavaScript, which means we can treat them like any other object. We can assign them to variables, pass them in as arguments, and return them from functions.

To create a function, we can use function declaration syntax like this. And we can put this anywhere in our code. Or we can use something called a function expression, which is where we're taking a function like this and either assigning it to a variable or passing it in to another function as an argument.

Here's an example of taking that function expression and passing it in as an argument to this other function.

Now functions can have names. In this case, when we declare the function up here, the name of the function is function declaration.

Down here we created a function, and we assigned it to a variable with a name. So this is more specifically an identifier function expression, but notice there's no name here. So we call this function an anonymous function, even though we've assigned it to a variable that has a name. The function itself is called anonymous because we haven't named it explicitly. And so you can see other examples of anonymous functions here.

Down here functions you can see can have names even though we're taking the function and assigning it to a variable. So in this case the name is the same for both the variable and the function name. This can sometimes be helpful in stack traces, to see the name of the function. And then down here here's another example of an anonymous function with no name.

Functions can take arguments when we call them. They can take named arguments like this, where we actually have a variable, an identifier for the argument, like arg1 and arg2. Or we can pass in an anonymous set of arguments. The way we can work with anonymous arguments is by using this special keyword called arguments.

And in this case, we're converting this to an array and then calling the slice method to grab all of the arguments after the second position. We'll talk more about the arguments object in a specific video.

Finally, functions can return any of the values of JavaScript, including other functions. We can omit the return statement altogether, in which case by default the function will return undefined.

In this video we looked at how functions are just like regular objects except they're callable. In the JavaScript console we looked at how a function object gets created on the heap just like regular objects, and how they have a prototype chain that eventually hooks up to object.prototype.

Then we looked at some vocabulary and concepts in the code here. Specifically we looked at some of the different ways to declare functions, how we can pass functions in as arguments or assign them to variables, and return them from other functions.

And then we looked at what an anonymous versus a name function is. And finally, we took a look at function arguments.

Hopefully this gives you a quick tour of functions, and now we can dive into some of the more specific details.