Object Methods | JavaScript 🔥 | Lecture 041
Summary
TLDRThe lecture discusses adding functions called methods to JavaScript objects, allowing objects to have capabilities beyond just storing data. Methods are created by assigning a function expression as an object property value. The 'this' keyword gives methods access to other data in the object. An example method called calcAge() calculates a person's age from their birth year. Another method getSummary() returns a string summarizing the person's data. This demonstrates that arrays are also objects that have built-in methods, foreshadowing more complex topics ahead about why arrays can have methods.
Takeaways
- 😀 Objects can contain functions as values, called methods
- 👍 Methods can access the object's properties using the 'this' keyword
- 💡 'this' refers to the object calling the method
- 📝 Methods can calculate and store data in the object for later use
- 🚦 Arrays are actually a special type of object with built-in methods
- 🔑 Writing methods keeps code DRY by avoiding repetition
- ✏️ Challenges help reinforce learning of new concepts
- 🎯 Object methods enable efficient data access and manipulation
- 🚀 There is an exciting programming journey ahead to dive deeper
- 🧠 Understanding function expressions enables writing methods
Q & A
What are object methods?
-Object methods are functions that are attached to an object. They are also called method properties on objects.
How do you add a method to an object in JavaScript?
-To add a method to an object, you define a function expression as the value for a property in the object. The property name is the name of the method and the function expression becomes the method definition.
What is the 'this' keyword in a method?
-The 'this' keyword in a method refers to the object on which the method is being called. So 'this' points to the object calling the method.
Why use the 'this' keyword instead of hard-coding the object name?
-Using the 'this' keyword allows the code to work automatically if the object name changes, following the DRY (Don't Repeat Yourself) principle by avoiding hard-coding the name.
How can an object method access other properties on the same object?
-By using the 'this' keyword, a method can access other properties defined on the same object, for example with 'this.propertyName'.
What are built-in array methods?
-Built-in array methods are functions that allow manipulation of arrays, like push(), pop(), shift(), unshift() etc. Arrays have these because arrays are also objects.
What is method chaining?
-Method chaining is calling one method after another sequentially by chaining them together with the dot notation, for example array.push().pop().
Should calculation logic go directly in object property values?
-No, any complex logic should go in methods instead, while property values can cache results, avoiding repeat calculations.
Why define a getSummary() method instead of a summary property?
-Defining a getSummary() method allows dynamically generating the summary string when needed, ensuring it stays up-to-date if properties change.
What is the main advantage of using OOP in JavaScript?
-The main advantage of OOP in JavaScript is better organization by grouping related properties and behaviors into objects, keeping code modular and reusable.
Outlines
😀 Adding Functions to Objects as Methods
Introduced the concept of adding functions to objects as methods. Showed how to attach a function calcAge() to the Jonas object as a method to calculate his age. Demonstrated how the this keyword allows accessing the object properties like birthYear from inside the method.
😯 Using this Keyword to Reference the Calling Object
Explained that the this keyword inside a method points to the object calling the method. Showed how we can use this to reference properties of the calling object like birthYear instead of passing them as arguments. Discussed why this is better than hardcoding the object's name.
💡 Storing Values in the Object for Efficiency
Demonstrated how we can use this to not just reference properties but also set new properties on the object. Calculated age once using calcAge() and stored it in this.age property to avoid repeat calculations. Retrieved the stored age property later instead of recomputing.
👨💻 Writing a Method to Summarize Object Data
Gave a coding challenge to practice writing a method getSummary() that returns a string summarizing the person data in the object. Used techniques like this, calcAge() and ternary operator to access properties and build the summary string.
🔗 Linking Object Methods to Array Methods
Built a bridge between object methods and array methods by explaining that arrays are also objects behind the scenes. This allows arrays to have built-in methods that manipulate them.
Mindmap
Keywords
💡object
💡method
💡this
💡function expression
💡template literal
💡this.property
💡dot notation
💡DRY principle
💡turnery operator
💡arrays are objects
Highlights
Objects can hold different types of data like strings, numbers, Booleans, arrays, and even other objects
Functions are values, so we can create a key-value pair where the value is a function - this is called a method
Any function attached to an object is called a method
The this keyword points to the object calling the method
Using this avoids violating the DRY principle by not hardcoding the object's name
Can use this to store calculated values as properties on the object
Writing a method to return a summary string about the object's data
Arrays are also objects, which is why they can have built-in methods like push(), pop(), etc.
Creating own methods on own objects vs using built-in methods on arrays
Understanding that arrays are objects and have methods is an important realization on the development journey
Can hold different data types like strings, numbers, Booleans in one object
Functions are first-class citizens - can be passed around like values
Methods allow accessing functionality through dot notation
This keyword gives access to current object from within methods
Getters encapsulate access and hide implementation details
Transcripts
Let's keep exploring objects
and this lecture will bring us to object methods.
So we learned that objects just like a race
can hold different types of data.
And they can hold even a race,
and in fact, they could even hold objects inside objects.
But now we can take it even further.
And for that, remember how I said
that functions are really just another type of value.
And if a function is just a value
then that means that we can create a key value pair
in which the value is a function.
And that then means that we can in fact,
add functions to objects.
And so let's now see how.
And once more, I will get back this object here
but we will change it up a little bit this time around.
So here let's simplify and just put the birthYear.
So just 1991.
And I also want to add a Boolean here, hasDriversLicense.
Just to show you that we can hold all kinds
of different data types in one object.
But now let's also add a function here as a key value pair.
So to do that, all we have to do is to add another key here.
And the function that we want to add is again,
the calcAge function.
So that's one of the favorites, as you can see,
but it is because it's a very simple calculation
that we can do with the birth year.
So to do that, let's simply add the name
basically off the function here as a key.
So as a property,
so calcAge and then the colon, and now here
we simply specify the function as an expression
and that works because the expression produces the value.
And so we can just do this,
so function, and just like before ,
we pass in the birth year
and we return 2037 minus the birth year that was passed in.
So this is pretty similar to simply writing this, right?
So a regular function expression.
So const calcAge like this,
this is how we used to do it before.
And so you see that this is pretty similar.
The difference is just in the syntax
because now calcAge is not a regular variable like here,
but it's a property of the Jonas object.
And so therefore we use the colon here
but the rest here is exactly the same.
And so that's why it was very important
that you understood what a function expression actually is
because here we need to function expression
to create this method.
And that's what this function is called.
So any function that is attached
to an object is called a method.
So of course we could have not used
a function declaration here.
So something like this,
so function calcAge, for example, that would not work,
we would certainly get an error here.
So unexpected token function,
because this is a declaration.
And so it doesn't work here,
here, we need an expression.
And so this will work indeed.
Okay? Does this make sense?
So if you can think of functions as simply being values
then you can see that a method is actually also a property.
It just happens to be a property
that holds a function value.
So here we have a string value,
here we have an array value,
here we have a Boolean value,
and here we have a function value.
All right.
So, I hope that's logical.
And now just like we can access any other property,
we can also access the calcAge property or method.
So jonas.calcAge and so calcAge is now the function value,
and just like any other function in order to call it,
we use the parenthesis.
And now we can pass in the year here.
And so that should then calculate our age.
And let's just unlock this result to the console here,
just to see if everything works.
And it does indeed.
Okay. And you could also have access
to this method using the bracket notation,
because again, it's just as if it was a normal property
and the brackets would actually be necessary here
so that this then here is the function
and then we call the function using the parenthesis.
So let's try that.
And, yeah, here this needs to be a string.
So like I showed you in the last lecture,
and now here we get 46 as well.
Okay. So just like I showed you in the last video
with the operator proceedings table,
the first thing that happens here,
is that jonas.calcAge is computed.
And so this here will become the function value.
And then with the parenthesis,
we call that function value here and passed in 1991.
And the same thing here,
so here we access the property calcAge using the brackets
and then this here will basically be replaced
with the function,
and then we call the function right here, just like before.
All right, now you might have noticed
that the birth year 1991,
that we passed here as an argument to the method
is actually already defined
in the Jonas object itself up here, right?
So we already have this information in the Jonas object.
And so writing the same number here and here is not ideal
because we might make a mistake and pass in the wrong year.
For example, right here.
So Jonas' birth year is 91
but here, we could, for some reason accidentally do 92
and then it would be wrong.
And even if we do not make any mistake,
this is still not ideal
because we are not keeping the code dry.
So we're violating the don't repeat yourself principle.
So if we know the birth year of Jonas,
it would only be written in one place,
not in multiple places,
because if that might change,
then we have to change it everywhere.
That's always the philosophy that we need to keep in mind.
So what if we could actually access this birth year property
directly from the Jonas object
instead of having to pass it in?
Well, it turns out that we actually can,
and that's because in every method,
JavaScript gives us access
to a special variable called this.
And so what we can do now is in this calcAge function,
we can read the birth year directly
from this object itself without having to pass it in
as a parameter here into this function.
Alright, so let me copy this and comment this one out
just so that we keep a record of what we did
but this here will be the new version.
So now we no longer need this parameter
and we will read the birth year directly from the object.
And for that again, we will use the this keyword.
So the this key word
or the this variable is basically equal to the object
on which the method is called,
or in other words,
it is equal to the object calling the method.
So, let's see who is calling the method.
So down here, here is calcAge,
and the object that is calling the method is Jonas,
because that's where the dot is.
And let's forget about this one,
actually comment it out here.
And so again
the object that is calling the calcAge method here is Jonas.
And so that means that inside this method
the this variable or the this keyword will point to Jonas.
And so let me just write this.birthYear here
and then I can explain it even a little bit better.
So, here we don't need to pass the 1991 here
and I will run this now and we still get the correct result.
So, great.
And to make this even more clear here,
let's also log this to the console,
and indeed, this is the whole Jonas object.
And so again, that's because the Jonas object
is the one who is calling this method,
so this function,
see here, it's jonas.calcAge
and so whatever appears before the dot
is the one who is calling the method.
And so therefore, in the method,
this points to Jonas now,
and if this points to Jonas,
then this.birthYear is of course
this value that we have right here.
Great.
So you see that the this keyword
is something really, really useful
and we will learn even more about the this keyword
in greater detail in a later section.
For now, I just wanted to introduce you to this concept
and I noticed can be a bit confusing.
So really make sure to maybe pause the video
and really analyze what's happening here.
Maybe you can even rewind a little bit
and hear my explanation again,
that might be useful too.
Now you might argue that maybe we don't even need
this confusing this keywords.
Why not just do jonas.birthYear, here instead?
Well, because that would actually still violate
the don't repeat yourself principle.
It would work just the same here now,
but then let's say
that we need to change the name of the object.
So we change it here to Jonas2
and then we call Jonas2 down here,
and then the code will no longer automatically work,
because now Jonas is not defined of course.
And so we would have to keep that in mind
and then come here and manually change this as well,
while if we had the this keyword,
then everything will keep working
without us having to change it there,
because now this will simply point to Jonas2,
because that is the object calling the method.
And so therefore it's always a good idea
to reference the object itself
and not hard-code the name of the object.
So let's put it back to Jonas and yeah, much better.
So this works great already,
and we're really going
into some more advanced territory here.
So I hope you're still following me
and you're still making sense of everything.
However, we can actually even take this a little bit further
but don't worry, it's not going to get a lot more confusing,
just a small variation of this,
because let's say that we need to access
the age multiple times throughout our program.
So that would be like calling this a couple of times.
So let's say in three places of our application,
we need to access the age,
and so, of course this will work,
and indeed it does.
And it always locks the Jonas object
because we still have this here.
So this makes it a bit easier to view.
And so what happens here
is that a function will get called a total of four times.
And so this computation here will be done four times.
And in this case that's not a big deal
but it might be a like a heavier computation
that actually takes some more time,
and so it would be a bad practice to do this multiple times.
Instead, what we can do is to just calculate the age once,
then store it in the object,
and then when we need it at a later point,
we can then just retrieve the age
as a property from the object.
So, I hope you're following me here.
So I will again copy this and comment it out
so that we keep all the three versions that we did here.
So, what I was trying to say
is that we can now use the this keyword
also to store a new property.
So, we can say this.age is equal to this here.
So we calculate the age,
and then we create a new property on the current object.
So in this case, on the Jonas object,
and remember that we can use the dot notation like this
to create new properties.
So we did that in a previous lecture as well.
Where was that?
Yeah, right here.
So here we created jonas.location
and set it to Portugal.
And so here we are essentially creating jonas.age
and setting it to this age that we just calculated.
And then we can simply return this age.
And of course we don't even need to return anything
if we didn't want to.
We could make this method only calculate the age
but not even return it,
but I think it's a good practice
to actually also return it.
And so now here we can replace the function call
with simply a request
for the age property,
and notice this trick that I did here again
with the command D, right,
So this gives me multiple cursors
and then I can do one operation
in multiple places at the same time.
So that's a really handy shortcut.
So, again, command D, or control D
and in the menu bar that means add next occurrence.
So let's test this and the results should be the same,
and it is, but we only needed to calculate the age once
then from here,
we simply retrieve the property
that we had already calculated before.
And so this is the most efficient solution let's say.
All right, and now I actually have another,
a small challenge for you
that you can do just in this video.
So I want you to write a method called getSummary
and this method should return a string
which should kind of summarize the data about Jonas,
or, of course, any other person data
that you might have used.
For example,
let me again,
actually we can get rid of this.
So let me write Challenge here again
and then do an example string.
So I want you to write for example this,
Jonas is a 46 year old teacher.
And we now could actually add all the data here
to the string,
but that would be too much work
and I'm a bit lazy now.
So let's just also say if I have a driver's license or not.
So Jonas is a 40 year old teacher
and he has a driver's license.
And it says that I have a driver's license
because it hasDriversLicense is true
but if it was false, then here, it should say
and he has no driver's license.
So it's either a or no.
So figure out how you can do that,
and so I hope you manage to do it.
It's a bit similar to what we did in the previous lecture
but this time I want you to actually write a method
on your own.
So give this a try and I see you here in a second.
Okay. So let's add getSummary
and remember that you to a need to have a comma
between the properties.
And so that's true also with methods,
so here we need a comma,
and then just a function
and it will then get all this data of course,
from the current object.
So actually let's first call this method,
so, and we're doing it inside of console log,
log because of course,
we want to be able to see the summary string
as a message in the console.
So jonas.getSummary.
Okay. So, which is the object calling the method?
It is Jonas.
And so therefore, the this keyword inside of getSummary
will be Jonas.
So I hope that this one is clear at this point.
So let's now build a string here,
and starting with the name,
it is at this.firstName is a,
and now the age,
so this, and now what do we do here?
Should we use the age property, or should we do calcAge?
Well, I would say that we should do calcAge
because we cannot assume that calcAge
was already called before.
Okay.
And if we don't call calcAge before we call getSummary
then the age property would not exist.
And so,
and so it's, it's better to actually do calcAge here.
And so I think we did this before,
so in a template string, we can easily do a function call.
That's not a problem at all.
So this.calcAge will call this other method
and this will then return the age.
Alright. And maybe it might be strange for you
to call the function also on this,
but well, the rule is just exactly the same.
This is Jonas in this object,
and so this is essentially the same as writing it here.
Alright. So this will become the age
and so, year old,
and now the job, jonas.job,
and he has,
and now we need to decide between a and no.
So let's do a turnery operator here.
So we get this.DriversLicense,
and basically if it's true
then we want the results of this operator to be a,
and if not, we want it to be no.
And then driver's license.
Okay? Makes sense?
So again, here we want either a or no,
depending on the state of the hasDriversLicense property.
So we get that property
by calling this.hasDriversLicense
and here we're using the turnery operator.
And so if this first part is true
then the result of the operator will be a,
and otherwise the result will be no.
And so that's what will then be put
into this place of the sentence.
Okay. And we already called the method down here
and we logged it to the console,
and so I think this should work now.
And it does.
So Jonas is a 46 year old teacher
and he has a driver's license.
Now just to test, let's set it to false and no,
and he has no driver's license.
Beautiful.
Okay.
And yeah, that's all the code
that I had to show you in this video.
And now just to finish the lecture,
which I know is already running quite long,
but I want to basically build a bridge
between this method and the array method lecture.
So remember that we used methods on a race previously,
so we can quickly go there.
So it was before this challenge.
Yes, indeed.
So for example here we have friends.push.
And so we have an array and on there we call a method.
So just like we did in this video,
now what this means is
that arrays are actually also objects,
they are just a special kind of object.
And so they have functions, or in other words
they have methods that we can use to manipulate them
like push, pop, shift and unshift and many more.
All right? So in this lecture,
we created our own methods on our own objects.
But here we basically used built in methods on a race.
And so once again that means
that the race are actually also objects,
that's why they can have methods as well.
And we will dive deeper into why things work like this,
but I wanted you to realize this early on in the course,
this is quite a complex topic,
and so there is really a very exciting journey
still ahead of you.
So I hope you're enjoying this journey so far.
And now to test your knowledge,
there is coding challenge number three, coming up next.
Voir Plus de Vidéos Connexes
Object Oriented JavaScript Tutorial #1 - Introduction
Class Methods in Python | How to add Methods in Class | Python Tutorials for Beginners #lec87
Classes and Objects in Python | OOP in Python | Python for Beginners #lec85
Excel VBA Programming - The Excel Object Model | 1 - Object Oriented Programming in Real Life
Model & Prediksi Data | Model data berdasarkan objek [2.1/3]
Self and __init__() method in Python | Python Tutorials for Beginners #lec86
5.0 / 5 (0 votes)