So I have another practical example of a really usage case for adding methods to an object.
There's a popular javascript library called the underscore J.
Yes.
And we'll talk more about what libraries are but for now think of it as just a bunch of code.
Someone else wrote that we can use.
So all that underscore is is a bunch of functions that someone else wrote.
We can see them here.
Each one of these is a different function.
So we've got things like find every Some contains min max sort by and doesn't really matter how they
work or what they do.
But it's important that I show you that there are a lot of them.
So underscore name spaces all of them together a group of them altogether instead of an object called
underscore.
Just to underscore character so you can see this is how you call them.
Underscore make this a little bigger underscore dot map underscore dot reduce and that's just done so
that all these methods are grouped together so that you know everything that starts with underscore
is coming from this underscore library.
You didn't write it yourself.
We'll eventually talk about how we import a library like underscore.
You'll see how we could even write something like underscore eventually.
But what I want to show here is not the code itself.
I just want to show the fact that everything is grouped inside of an underscore object.
So rather than dog space or cat space they decided to use a really short memorable character which is
underscore.
There's one more thing I want to highlight in this video which is the key word this so in javascript
there's a special word this that we can use in different contexts to do different things.
So to demonstrate what it does and how it works I'm going to go ahead and do a quick example.
So let's suppose that I'm making an app that has some comments and I want to have some common data stored
instead of an object as well as a few methods like print or delete that I want to be stored instead
of an object as well.
Just like we saw with the speak method so I'm going to define a namespace called comments.
So var comments it's going to be an object and I'm just going to start with it being empty.
Next I'm going to define the data property which is just an array of comments.
So it's some silly comments just like this.
And we hit enter.
So we have comments like this where we just have one property data and that property has that array
has three different comments in it.
So if I wanted to make a method called print what I could do is define a function separately just like
this function print and it takes in an array.
And all I want to do is just cancel dot log each comment so I could do it in a weird way where I did
print and then I just did a for each.
So array for each function call it element.
And then I cancel that log.
L So this function right now is not a method.
It exists outside of my comments object and if I wanted to print out common stock data I would have
to run print and then pass in comments dot data.
So that's what we've been doing up until this point defining our functions separately in the global
window namespace.
But if I want to add it to the comments object all I need to do.
I mean copy my code here and I'm going to go back here and say comments.
Print equals.
You're going to paste my function and I can leave this name here.
I'm going to get rid of it though because it's unnecessary to name it.
There as well.
And rather than having it take an array as an argument I want it to use what we already have instead
of comments which is we already have the data in the same object.
So is there a way for me to share the data instead of an object.
So I can use common stock data inside of common stock print.
And the answer is yes.
And that's where the this keyword comes in.
So I don't need any argument.
If I only want this to do is print whatever is in common data instead of a radar for each.
I can actually write this dot data.
So the keyword this is a little bit tricky in different situations.
It means different things.
Definitely one of the quirkier parts of javascript.
A lot of interview questions focus on it.
So it's something that even experts will struggle with.
We're going to spend a lot more time with the key word this as we go forward when we learn about events
when we talk about Jay query and when we move to the back end and talk about databases as well.
So for now in this case the word this refers to the object comments so I'll show you if I hit enter
here.
Let's look at what common looks like now it has two things.
Data and array and then this print method.
And remember that the print method is referring to this data.
So when we're inside a print this is referring to the entire object that has data inside of it.
So this data is how we can go from inside a print can access this data.
So to use that method now all I need to do is say comments Prince and we get our three comments printed
out.
So what I've just shown is a really common pattern for how we organize code.
We can take some data put it inside of an object and then take associated functions and functionality
and add them as methods to the same object and use the keyword this to access the data that we predefined
.
If you're feeling a little bit confused about the key word this that's definitely to be expected.
We only have just scratched the surface.
And as I mentioned we're going to keep revisiting it over and over.
All I want you to understand is that there is a keyword called this.
It's a little bit tricky.
And in one context the one that I showed here by writing this instead of a method it refers to the object
that the method is defined in.
OK so that's it for objects for now.
Very exciting.
Next up we get to finally talk about HDMI and see assess interacting with our javascript