Built-In Array Methods

[00:00:00]
>> Will Sentance: Arrays, objects and functions have access to methods. That means, functionality, they can use on themselves. So, let's just see this. Save array one, two, three. And we can run a method on it. And that function push is somehow you're gonna have access to the array one, two, three in order they can add the number 10 to that array.

[00:00:22]
Where is that stored? If you've been to Hard Parts object oriented program, you know this all inside out. Raise your hands if you been to Hard Parts OOP at some point? Okay, but the rest of us is gonna be new, let's squeeze it in. Squeeze it in over here and I'm gonna use blue I think.

[00:00:41]
So let's squeeze in over here, or pink for the array bit. So, line one here, Seth, what are we doing, simple first line?
>> Speaker 2: You're declaring the constant array value of an array.
>> Will Sentance: Exactly, okay, this one will continue my code here. Now if I then do array, .push(10).

[00:01:12]
>> Will Sentance: JavaScript does a look up. It goes array, what the hell is that? It goes and looks for it.
>> Will Sentance: Goes and looks for it, and it sees, is there a, it's like it's an array. Why am I trying to treat it like it's an object, with a dot?

[00:01:32]
Does anyone know why?
>> Speaker 2: Because it is an object.
>> Will Sentance: Well, that was easy.
>> Speaker 2: [LAUGH]
>> Will Sentance: [LAUGH] Genius, all of you. It turns out as soon as you save any array, and by the way any function, behind the scenes, you're also saving,
>> Will Sentance: An object, which can be accessed using dot notation.

[00:01:54]
So when it gets here, it looks for the object. And it looks for push on that object. For reasons that we're not gonna go to today. Well, besides that you don't wanna have a copy of the same push function on every single array saved. There's no push method saved on here.

[00:02:07]
Instead, we have a store,
>> Will Sentance: There, these things are amazing as pens. We have a store,
>> Will Sentance: Of functions, that all arrays as soon as they're saved have access to, and it's an object full of beautiful useful functions. Push is one of them. What other ones do we have?

[00:02:41]
Jasmine?
>> Jasmine: Pop.
>> Will Sentance: Yeah. Well, we'll hold on that one for now. Yeah, Sam?
>> Sam: Lick.
>> Will Sentance: That's even worse, it's certainly different. There's a whole bunch of them, we've already seen one.
>> Sam: Reduce. Filter.
>> Will Sentance: Reduce, filter. Exactly reduce, filter, map for all of these, they're all stored on this object.

[00:03:08]
And JavaScript gives all arrays access to them, folkman, if you wanna know all this inside out, it's all in OOP Hard Parts.
>> Will Sentance: The least watched of all the hard parts. And yet my favorite, read this talk is just a long warm up to promote the OOP hard parts.

[00:03:25]
It shouldn't be called OOP hard parts. It should be called clauses and prototypes and people like that's like react. Let me know any more case even that's not gonna work out. Anyway, so, when JavaScript sees dot push quantum array goes and looks it goes up, all they want me to look at the object bit.

[00:03:41]
It looks at the object bit, there ain't no push methods stored on it, JavaScript doesn't give up. It looks at a hidden property called _proto_, which is a link to this shared object that all arrays have access to. Just as an FYI, this shared object is known as array.prototype.

[00:04:05]
Which is just the label for this object in JavaScript. We could go and console log array.prototype, we would see this object full of functions. And that means that when we run push, JavaScript is gonna have to use it's amazing, I think it's probably most well, top three best features.

[00:04:23]
It's prototypal nature, that is its feature that means when it doesn't find a method on an object, it doesn't give up and it's on the property and looks up what's next up the chain. And it's easy link up to all these functions here. And once it it finds push, and it grabs it, and it uses it.

[00:04:41]
And into it, it's going to auto insert, what was array? One, two, three is going to auto insert that array into this function. So the ten can be added to the array inside of push. Okay, and then it's going to have the output of this whole section B.

[00:05:00]
What would it be, (1, 2). Actually that's not true. That's actually not true. That's not how pushes not return that. Both of the time they do, but that one does not. But, it's gonna add to that (1, 2, 3) to array and it would become (1, 2, 3) Ten.

[00:05:17]
So that's an interlude because I want us to use that fact to do something interesting we've still got time. So as we see, the methods that arrays get a stolen object, that every array has access to when you refer to the array, followed by adults, followed by the method name see OOP hard parts.

[00:05:33]
The link to the object from the shared methods is on the product property of every arrays hidden object piece. Okay, I don't know if I want to do thumbs on this honestly, there's a thousand interesting questions you could ask. But they're all in the OOP hard parts, so unless anyone has a really burning.

[00:05:51]
>> Speaker 2: I don't know, this must be answered in JavaScript, I mean gsr parts, but what I'm saying is when you do an array, does it do a new array and creates one for you?
>> Will Sentance: That’s gonna depend on which method you’re using, let’s see the ones that do.

[00:06:07]
Thank you Charles, teed up perfectly. JavaScript has a built-in version reduce available to all arrays, there it is. Reminder our version reduce, remember it took in an array 1, 2, 3. Took in the function by which we're gonna combine the first element with the accumulator. The thing with which we're gonna combine, take the output of that, combined with the next factor, so forth.

[00:06:29]
With the built-in version, the arrays inserted into the reduced function automatically as the first input argument. Look at this, did you see here, the only that changes with the built-in version is that, let's just write it. I think I'm gonna write it here. If we did, instead, 1, 2, 3 .reduce.

[00:06:53]
Add is the functionality for combining, and zero is the thing with which we're gonna combine. It goes and looks, this 1, 2, 3 here has access to the shared objects, there. As all arrays do through it, through its hidden proto feature of its object, right. Look for and choose on it, there it is.

[00:07:18]
Grabs it functions code, starts running it, and auto inserts the 123, okay. I don't want to dwell on this. Does anyone know what keyword the reduced function you uses to get access to the thing to the left of the dot, inside of itself. Because this function is built using JavaScript or code, what keywords that use,

[00:07:39]
>> Speaker 2: This.
>> Will Sentance: One running from this, exactly, exactly. Okay, but nothing else has changed, it's exactly the same, let's keep moving. As [LAUGH] I'm talking to say this, in fact, we get a number of built-in higher order functions. That is functions like map for each filter, flat MAP, reduce, reduce right, all sort on this object.

[00:07:59]
And all arrays have access to this object. All of these higher order functions iterate through each element of the array. 123, 123 like iterate do it one by one. Map doesn't say, all iterate through each over the array, and run a function on each. And there to Charles point, and stick the result or into probably an array, reduce stick the result of combining with whatever you determine to combine with.

[00:08:29]
Map, brand new function, brand new, I'm sorry, array inside of it. We're gonna come to that later on actually, let me talk about immutability of data, Charles, but they behave differently. MDN, which is the Mozilla docs that I think Jasmine shouted out earlier. Are our guidebook on the signature.

[00:08:47]
The way in which each of these built-in functions work. And hopefully now given you know that this collection of functions has a label array .prototype. You understand why in MDN they always have array.prototype.reduce. Array on prototype dot filter is the label, not exactly helpful, right? When you're starting out you look at that, I just wanna reduce function, what is this array.prototype.reduce?

[00:09:12]
But it's just where the reduced function is built and stored.