This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "Arrays Exercise Solution" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Bianca Gandolfo: Let's just quickly go over the exercises from before lunch. So these are our array exercises where we're practicing creating data structure for our e-farming application. And this is gonna be a collection of our animal users. You can imagine your application, if you have different pages you'll have perhaps user profile page, if you think of your Facebook profile, that would be the model or our first object from step 1, the object's portion, and then there's the portion where maybe you have a browse, where you can browse the different users on your website, or a search function where you would then have a collection of all these different users shown on that page.
[00:00:53] And so this would be like different scenarios where you'd be using either just a model data structure, versus your whole collection, which would be an array user models. Any questions on sort of just that general concepts of sort of how to architect your data in a way that makes sense for the view that's gonna correspond to the situation that you're gonna use it?
[00:01:23]
>> Bianca Gandolfo: All right. Did you have a question? No.
>> Student 1: [INAUDIBLE]
>> Bianca Gandolfo: Cool. So, I'm just gonna quickly go over some of the exercises. So here we're creating a noise array, and we're just adding, we're adding a string there called purr. Notice this is just like the object literal notation where we can just add it in there.
[00:01:47] If you wanted to do two, we can just say, I don't know. I don't know what's a sound? What's a sound?
>> Student 2: Oink.
>> Bianca Gandolfo: Oink. Okay, so we have a cat, also oinks. So just like in our object literal notation you can see we have our values separated by commas, and that we just put them directly into the brackets the corresponding brackets.
[00:02:13] And that's array literal notation, same as or really similar to object literal notation in so far as you can just automatically add your values in there, you don't necessarily have to use bracket notation to add them or a method like shift or unshift. I'm sorry, unshift or push.
[00:02:34] Cool, so and here we are we're using unshift for our noise array. What does this method do?
>> Student 3: Put's it in the first position?
>> Bianca Gandolfo: Yep. So unshift will have your array and it will put that value at the first position. So everything will be shifted over once.
[00:02:53] And the 0F would then be whatever you passed. And so this is, unshift is what we would call a native array method. So it's a function on the array. That comes out of the box with JavaScript. And then push is another one of those array methods, and again, a method is just a function.
[00:03:14] And we can tell that this is a function, right, cuz we're calling it with those two parentheses right there. Just like we would call a regular function if you said var x equals function, And you returned whatever and you wanted to call it, you'd just say x parentheses.
[00:03:29] Just like, I don't have mine. Just like this. So var x equals a function. Right? And if we were to call that function we would just do that by having two trailing parentheses. Right and if we said var obj equals our object. And then we said obj.x we have our function.
[00:04:00] Uh-oh. Maybe it doesn't like that it's empty.
>> Bianca Gandolfo: Okay. And so just like, we can call x by itself, like this, right, we can also just call it on the object the same way. So that's all our array methods are. And then here on line 15, we are just adding using backend notation and a number and we're just adding the value, growl.
[00:04:40] And so then we can console log our noisearray.length. And what is that gonna log? How about, who haven't, how about Kashore? What is this line gonna log?
>> Kashore: 4.
>> Bianca Gandolfo: Close, it's five because I added an extra one. Yeah so this gonna console.log then five.5 And then if you want-
[00:05:09]
>> Student 3: If it's noiseArray[3], is that gonna replace meow?
>> Bianca Gandolfo: You're right, yep you're right, it would be 4.
>> Student 3: Do we get a point for that, for-
>> Bianca Gandolfo: Yeah, extra points, yeah. So many points, bonus points. And a gold star. Okay. So line 20, console log we're just inspecting our array and our array is gonna look something like this and so animal.noises.
[00:05:41] We then added a noise array and what's happening here is we're just overriding that empty array. So we're not actually adding something to the previous array, we're just completely overriding it. When we see this equal sign, that's not augmenting, it's not adding or anything like that. It's just gonna completely override it.
[00:06:02] So that is something important to keep in mind and now you can see your animal has its user name, tagline, and also this array, the property name noises.
>> Bianca Gandolfo: Cool, any questions on that so far?
>> Bianca Gandolfo: No, okay. So, then here we go, we have our animals collection.
[00:06:30] Which we're just gonna initialize as an empty array. And then, what this is gonna be is it's gonna be an array of animal objects. And so we have our first animal that we're pushing on, which if you remember is the cat Mittens, and then we're gonna take quackers and we're gonna add quackers to where?
[00:06:53]
>> Student 1: [INAUDIBLE]
>> Bianca Gandolfo: To the end, mm-hm. So that's actually It's gonna be the length. The length is the last index. Or is the last index plus one, so this would be the same as saying array.push, for example. You might even imagine that that's what array.push does under the hood.
[00:07:16] It wouldn't hurt you. And then console.log(animals) just to check to see where you are to see what your expecting and it should print out something like this. So you see we have an array, and then inside of the array we have one object here. And then we have the start of another object here.
[00:07:38] And then again we can create our object dog with our, just using object literal notation and then we can create honey badger and we're gonna be using all dot notation here. And also, then we can use the push method, which can take more than one argument. And here's where that array.length metaphor breaks down because you can have more than one argument.
[00:08:11] And then you can console log animals, length and then you have four. And that's how you create a collection. Has anyone used Backbone before? A little bit. So this might sound a little bit familiar. I work with a lot of Backbone, and this is how you can envision the models and the collections in Backbone.
[00:08:30] And also general MVC concepts. Cool, any questions about these exercises before I move on to functions?
>> Bianca Gandolfo: Good? Thumbs, nice. Awesome.