• JavaScript

Functions are Reference Types

From the class:  JavaScript Functions

Functions in JavaScript are assigned as reference types. This is a concept that we covered in the objects class, but I'm going to cover it again in this video to make sure that it's clear. I've defined a function up here, and I've named it myFunctionName. I've used function declaration syntax here. And so this function doesn't do anything, it doesn't have a body. But nonetheless, we've created this function on the heap.

So we've created a function in memory, and we can take this function and assign it to variables. To assign the function to a variable, we can create a variable with the var keyword. And we'll just call this myFuncA, and I'll set that equal to the function by its name. Now because we're using meteor, I'm going to remove the var keyword so that we can access this variable as a global variable.

And then over in the console, if I type myFuncA, you can see that it points, or references, the function that we created above it. Let's create another variable called myFuncB, and I'll also assign that to the function above. And then let's create a variable that's an object, and so I'm going to call this myObject. And we'll create a property on this object using object literal syntax. And we'll say that the property is called func, and its value is myFunctionName.

So what we've done here is we've assigned myFunctionName to a number of variables, to these two variables here, and to one property of an object. If we go over into the console, I'll type myFuncB just to show you that it does point to the new function. And if I take a look at the objects that I just created, you can see that its one property, func, points to myFunctionName as well.

To show this to you in diagram format, I've drawn the identifiers and values for them in this table here. So I've got my function A, my function B, amd my object.func. So these are the three variables identifiers on the left with this one property at the bottom here. And all of these values are just pointers, and so you could think of that as an arrow to this function object that exists in memory. So they're all pointing to the same thing.

If you remember from the objects class, if this were a primitive value like a number or a string, this value would be copied. And so each of these values would have their own copy of the primitive value. But in this case, since a function is a reference type, all of these values will point to the same thing.

Now let's change the assignment on the right hand side of my function B. Instead of assigning it to the function, let's assign it to my function A, to the first variable. And I'll do the same thing for this, my object property. Instead of assigning it to my function name, I'm going to assign it to my function B. So now this points up to what this variable points to, and this points to the original function.

Now because functions are reference types, this won't actually change the diagram at all. So if I go ahead and look at my function A, it still points up to the original function. And same for function b of the second variable, and same for the property of the object. So even though we're assigning to a variable, what JavaScript will do under the hood is actually create a new pointer to the value of the function in memory.

Now let's take this last property here and assign it to a different function. So I'm going to create a different function, we'll just call it different function. We don't actually need these semicolons at the end. And down here, instead of assigning this value to my function B, all assign it to different function.

OK. Over in the console if I type myObject and we take a look at the value of the func property, it's now pointing to a different function. So what's happened in diagram form is this pointer has gone away, and a new one was created. And that new one points up to our different function.

Lastly, I want to show you what happens when we pass a function in to another function as an argument. So let's create a function here called map, and it's going to take a function as its argument. And above this, we'll create a function just called myNamedFunction, it won't do anything. And so this is a function declaration of myNamedFunction, and then down here what we'll do is we'll call the map function, and we'll pass in myNamedFunction as a parameter.

What I want to do is put a debugger statement inside of here so we can take a look at what this argument has been assigned to. So over in the debugger on the right, we've been dropped into the function and now let's take a look at what the function parameter actually points to.

So what you can do is go down into the console, and we'll just type func in C. And you can see that it points to the function called myNamedFunction. But what's happening here is the parameter is creating a new reference, it's just like a variable being assigned to this function. So if I come down here in the code and we create another variable, we'll just call it myBarA, and assign it to myNamedFunction. And let's just put that up here, right at the top so we can get access to it.

And then we'll come back over here, press play, refresh. And now we're back into this function. And if we look at what func points to, it points to the myNamedFunction. And if we look at myVarA, it also points to the same function. So if we were to check whether or not these two things are equal, the answer is, yes they are.

So looking at it in diagram form, here I've drawn the table again, showing our various variables. And the first variable is myVarA, and its value is a pointer to the function. And initially, this variable here, which is an argument to this function, is just undefined. It hasn't been assigned yet. And then when we call the function passing in this variable here, just like with the regular assignment, this now becomes assigned to the same function.

So in this video we looked at how functions are assigned as reference types. Which means when we assign them to a variable, we're actually just storing a reference to the original function in memory. Then we looked at a couple of examples of assigning functions to variables and to properties and objects. And finally, we looked at what happens when you pass a function into another function as an argument.