This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "Using Functions" Lesson
[00:00:00]
>> We're gonna move forward with a similar idea of going through lists, transforming them, and we're gonna throw in a function now. So this function is called create suspect objects. And what does it return?
>> It looks like it returns an object but there's a lot going on.
[00:00:19]
>> Yeah. What makes you think that it's returning an object?
>> Honestly the curly brackets and the object properties that we're looking at here.
>> Yeah, ding, ding, ding, exactly.
>> Yeah.
>> Cool, so we're returning an object. We're finding some properties on this object, right? We have three properties, we have a name property, and this name is getting passed in, right?
[00:00:46] So we have just this function spits out an object when you give it a name, and it figures out its color by splitting the name at the space. In getting the second one. So scarlet, mustard, white. And then it has a speak function where it says its name.
[00:01:09] Yeah, and so we have this colon syntax here. That's an object literal syntax that we were looking at earlier. Often on the side, right? We've been working a lot with dynamic properties, adding things after we initialize the object. But here's just an object given to you all at once, but it's the same thing.
[00:01:27] The key here is that there's some curly brackets. We don't see any key words around it like function or if or something like that may make it feel like it's something else. And also we can return things like If and things like that, but we can return functions.
[00:01:45] Cool. And then we have an array of suspects so we have some more suspects now we have Colonel Mustard on the scene.Wonder what happened to rusty? I don't know. So can someone spot the difference?
>> Is it that you call speak immediately, what's going on?
>> There is something different about speak, I will admit.
[00:02:12]
>> It's a method on the function or on the object now?
>> Yeah, so this is a method, this is a ESX feature, where we can add methods like this, no colons, just straight on there. Works the same, no surprise. It's not a, a function or anything like that.
[00:02:28] It's just a regular function. So there you go. There's just some E6, okay?
>> I mean like these, you don't even need the function keyword for speak.
>> Nope, not in this case. Yeah, all right. All right, so we're initializing the empty suspects list. And actually before I give it away, what we wanna do is we wanna initialize each suspect.
[00:03:03] Into an object. I call this like hydration like you're hydrating data into an object. It's not the most I'm not using it very academically when I say that though, like people have opinions on like what hydration isn't isn't. In this case when I say we're hydrating an object that means we're just taking a data A piece of data and we're turning it into some data structure, right in your applications.
[00:03:30] You probably have like a, like a view model or something. Do you guys work with view models at work maybe. And you have some data coming in or even just a model, right? You have some data coming in either From the back end, or if in the case of your view model may be you have data coming in from a user, who knows.
[00:03:52] And to me, I would say that when we take that data and we turn it into an object like a class, that's like hydrating it. So that's what we're gonna do here. So this function is kind of like a class. In JavaScript, classes really are just functions that return objects.
[00:04:10] So this is really a class is in as much as using the keyword new or whatever is a class except in this case, we don't have to worry about the keyword this who really understands the keyword this I do. Because I teach it but most people don't. So we're not doing that today because that's just a whole nother tangent that I would love to get, I think actually have in one of my core actually, I think in data structures and algorithms course if you.
[00:04:40] Want to learn about the keyword this that's one of the very first Object. I do an object-oriented programming piece, and you can look into that and look at the different styles. Anyway, so we're gonna hydrate this list. What do we do? So we have the suspects list, which needs to be a list of objects created from the create suspect objects function.
[00:05:04] Are you guys following me here? I'm seeing suspects suspects a lot and it's very difficult. So we want Miss Scarlett to have a function with a name property that says Miss Scarlett, right? When we say Miss Scarlett that speak, I wanted to say my name is Miss Scarlett that kind of thing.
[00:05:24] Yeah, we're good? Okay. What do we do how do we do it
>> If you said Miss Scarlett. Dot speak. It should.
>> Yeah, we would need to initialize it first. So basically what needs to happen is we need to pass this string to this function so that we have an object That says that has MS.
[00:06:04] Scarlett with the name they should say Scarlett etc. That makes sense.
>> Create suspect objects you. Calling the function.
>> Yeah.
>> Okay, great.
>> So, how we were gonna, yeah, so, we'll do CreateSuspectObjects. And then what?
>> And then the name, Miss Scarlett.
>> But let's get out of our suspects.
[00:06:42]
>> Yeah.
>> [CROSSTALK] Something like that. Yeah, so we call it like that. Of course, isn't gonna work. All right. Do I have any typos?
>> Name is split, still says one.
>> Should say when I think.
>> [INAUDIBLE]
>> Is it going to work? Is it gonna explode?
[00:07:21] There we are, there's a hydrated object with Ms. Scarlett .Cool, straightforward. Awesome. So we can move through our list. And man.It kind of messed up my indentation. But, we can loop through our list, right? So, we start at zero, we go all the way up to the length of the suspects, we increment each time, right?
[00:07:54] That's what this says. And we're gonna assign a suspect, right? Maybe you wanna say let here, right? Cuz we're gonna reassign it. And we're gonna pass create suspect objects suspects at one, I'm sorry at I. Then we're going to push suspect into the suspects list. Seem fair? So we're looping through a collection hydrating it creating instances of these suspect objects.
[00:08:34] Cool, have you guys done this kind of thing before? Yeah, Okay, cool. Here's that with the last line. Combined. So we just say create suspect objects suspects that I and put that inside of the push and under there.