JavaScript 101 is a series of instructional videos given by DevMountain Web Development Instructors.Click here to see the entire video series.
Now that you’ve learned about functions and objects, it’s time to learn about methods. Methods are functions that are stored in an object, with their own specific type of key value pair. In this video, you’ll get an introduction to methods and learn how to use them in your code.
Video Transcription
Methods will hopefully feel like a familiar concept as long as you’re familiar with functions and objects. Methods are functions that are stored on an object. Like another property on an object it’s going to be a key value pair where the value is a function.
Benefits of Using Methods in Code
There are a few benefits to using methods in our code. The first is organization. By placing a function on an object as a method we are saying that function is meant to work with the other information stored on the object. A side effect of doing this is when we share that object with other parts of that code. The receiver of the object now has access to not only the data information but also functions used to interact, modify and manipulate the information on the object.
Finally, as we work with different code from third party libraries and packages we’re likely to run into built-in methods from those authors. What those built-ins are going to do is going to vary from library to library. So for now let’s focus on how we can add methods to our own objects and how we interact with methods in general in our own code.
Practice
We’re back and so is Joe Dirt. We’re going to talk about methods. In the previous video on objects we saw how to pass an object into a function. Today we’re going to flip that and use a function on an object and that’s all methods really are.
I can create a new key value pair and we will call this one “Say hello” and then its value is not going to be a string or a number, it’s going to be a function. “Say hello” is a function. This is what a method is. Let’s continue on and see how we use it. Console.log, “Howdy partner.” It’s now really how he talks but we’ll leave it at that. Take that part out. That’s not really how he talks. “Say hello” Our Console.log says “Howdy partner.” Outside of the object I can now run this function but I can’t access it directly. If I try to invoke “Say hello” and press F5 it’s going to give me an error here. Now let’s make this big so we can see it row clear and that error is “Say hello is not defined.” As far as JavaScript is concerned “Say hello” has never been created. And that’s because “Say hello” lives on the object, it does not live outside of the object.
So to access “Say hello”, just like accessing any other property on the object I have to prefix this with dot notation for the object itself. Person, you have a function called “Say hello” and I would like to invoke it. Press F5 again and we see our “Howdy partner.” This is neat because now not only with data can I easily share things between different functions or parts of my code base, I can also pass along functions to reuse certain functionality.
There’s one more trick that we can do with this. Let’s add a new method. Our next method is going to be an introduction. It is also going to be a function or a method. It’s okay if use those terms interchangeably, almost every developer is going to know what you’re talking about. You’ve got an introduction here and it is going to console.log. Well what we would like in the console.log is “I’m Joe Dirt.” Or “I am 32. Do you like my mullet?” And we could just type that out but what if Joe Dirt gets older? Now he’s saying he’s 32 when he’s really 35. What if he gets a different haircut? So what we would really like to do is actually access the other keys on the object. Let’s give this a whirl. Let’s just try to spit out age. So if I change the person.hellointroduction and I would like to see what the age is this doesn’t work. I get the same error we saw before that age is not defined.
When we’re inside of a method we do have an extra rule we need to follow and that is to access any other properties on the object. We’re going to prefix them with the “this” keyword. This is a pronoun just like he or she. “John went to the store, he bought apples.” Who bought apples. Well we know John did because we know how pronouns work. But this keyword works in the same way to say “this” is a placeholder for the object containing our method. So whose age? Person’s age which happens to be 35. Press F5 again and I do see 35. I can now put this together and say “I am + this.age + do you like my + this.haircut. And we see console logged. “I am 35. Do you like my mullet?” This is methods. Methods are functions assigned as values to an object. They work like any other function except they have access to the “this” keyword that allows us to go back and pull in the object containing our method and access other properties on it.
[cta id=”585″ vid=”0″]
