Check out a free preview of the full The Hard Parts of Object Oriented JavaScript course
The "Functions are Objects & Functions" Lesson is part of the full, The Hard Parts of Object Oriented JavaScript course featured in this preview video. Here's what you'd learn in this lesson:
Will maps out the object that gets attached to each instantiated function, and what it contains.
Transcript from the "Functions are Objects & Functions" Lesson
[00:00:00]
>> Will Sentance: All right, we're gonna just a brief interlude in this so that we can discover how JavaScript thinks about functions. And whether it thinks about functions, like user creator, in such a way that they give us a little place, a little object, into which we can store our functions and know that JavaScript will make the bond to that object.
[00:00:24]
To understand that we need to understand one of the most puzzling things in JavaScript. Although I think after a bit it becomes familiar. But one of the most puzzling things in JavaScript, that functions are both objects and functions. Let's see it. We're gonna map this out over here in our little bonus bit of board, with a new memory over here.
[00:00:49]
I'm gonna try and write this way. What here are we doing, Elliot, in line one?
>> Elliot: Declaring a new function, multiplyBy2.
>> Will Sentance: Declaring a function, multiplyBy2. There it is, saved as a function. Perfect. Next line? What's there to do, Elliott?
>> Elliot: Add a new property, store it.
>> Will Sentance: But it's a function.
[00:01:16]
>> Elliot: Also an object.
>> Will Sentance: Okay.
>> Will Sentance: That is right. It turns out that as soon as we saved with the keyword function multiplyBy2 as a function, it instantly got attached to it a whole object. As soon as you declare a function in JavaScript, it is a function, what I call function-object combo.
[00:01:47]
They are never functions alone, they are function-object combos. Now most of the time we don't really care because we don't really use the function's object bits. But we absolutely are in object-oriented programming. So as soon as you declare multiplyBy2 it is, yes, a function, okay. But immediately it also is an object.
[00:02:13]
And if you use what type of notation, Elliot, to get the object bit?
>> Elliot: Dot.
>> Will Sentance: If you use dot notation you're going to access its object form, and we're gonna assign the property five. But maybe, Elliot, that having this object and assigning stored to it, maybe that overwrote the function part.
[00:02:36]
Maybe now if we try and call multiplyBy2 with the input of three, we gonna find multiplyBy2, it's an object, it's not a function. Or what, what do you think, Elliot? Can we still do this? We absolutely still can. We access the function piece with our what symbols? How do we access the function piece, Nick?
[00:02:59]
>> Elliot: With the-
>> Will Sentance: With the parenthesis, exactly. That does not lose its access to the object piece. Let's see in the next line. Elliott, talk me through JavaScript's journey here in this next line. We look up multipleBy2 in?
>> Elliot: Global memory.
>> Will Sentance: In global memory. And then we use dot notation to access multiplied by, we find it, it's a function-object combo.
[00:03:29]
And what, Elliot, which bit of it do we look for when we use a dot notation?
>> Elliot: The property?
>> Will Sentance: We look on its object bit-
>> Will Sentance: In its function-object combo, where we find the property what?
>> Elliot: Stored.
>> Will Sentance: Stored, beautiful, and we assign to it?
>> Elliot: Five.
[00:03:45]
>> Will Sentance: Here is where we access the number five. So this is what actually happens when we defined a function. In fact over here when we declared user creator earlier, here's what we actually declared, a function-object combo. A function object combo.
>> Will Sentance: An object, a function, an object. This reminds me of that bit when Steve Jobs launches the iPhone.
[00:04:20]
I don't know if you've watched that many many times. An object is slightly more underwhelming than the launch of the iPhone, I think I got some slight delusions of grandeur there. An object, well what do we need to store our functions? That we want this function when called with a new key word to return our objects for those objects to have a bond to some object full of functions, and we don't know where to put those functions.
[00:04:48]
Because we can't put them in an object and give them a name like we used to. What if we, if we've got a function object combo, what if they were. Now actually what it turns out is when you declare a function, in other words a function-object combo, you actually get in that object automatically a property.
[00:05:09]
Can anyone figure out what that property is? Seth, can you figure out what the property is?
>> Seth: Prototype?
>> Will Sentance: Prototype, it is just a regular property, people, it is not. You've heard the phrasing a thousand times from developers, the function's prototype, as though it's some special thing. No, it is the function in its object form of its function-object combo property prototype.
[00:05:32]
It is nothing more magic than that, it is a regular property on the function in its object format, the function-object combo. One second, Neil, I promise. And that is automatically an object, and it's actually this big old empty object here that we might want to use to put all our functions in.
[00:05:59]
Such that when I call user creator,
>> Will Sentance: When I call user creator with the new key word and it makes me my object inside automatically, we're gonna walk through all of this, so not fear. Makes me my object automatically inside. It's automatically gonna make its bond or we can't manually make its bond to something called user functionStore.
[00:06:21]
Instead it's automatically, by the very nature the new key word, gonna make its bond to the name of the function in its object format on the prototype property, that big old empty object. Meaning we better put our functions in there that we want the object that gets returned out to have access to.
[00:06:39]
So we're gonna walk through this line by line to make it really, really clear. All right, so we could use a father all functions have by default a property on their object version known as prototype, which is itself an object to replace our user function store object.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops