Object Methods | JavaScript 🔥 | Lecture 041

Summary

The 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

00:00

😀 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.

05:01

😯 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.

10:03

💡 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.

15:03

👨‍💻 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.

20:03

🔗 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.

Keywords

💡object

An object in JavaScript is a collection of key-value pairs that can hold different types of values. Objects are very useful for organizing data and functionality together. In the video, the example object used is 'Jonas' which contains properties like birthYear, job, etc.

💡method

A method is a function that is attached to an object. Since functions are values in JavaScript, they can be added as properties on objects. Methods allow objects to have reusable functionality that is tied to the data in the object. For example, the calcAge() method is attached to the Jonas object.

💡this

The 'this' keyword refers to the object on which a method is called. Inside a method definition, 'this' points to the calling object. So inside calcAge(), 'this' refers to the Jonas object since that is where calcAge() is called using the dot notation.

💡function expression

A function expression produces a function value without needing a function name. This is required when assigning a function as a value to a property, like with methods. Only expressions, not declarations, can be used in this way.

💡template literal

Template literals use backticks and allow embedding expressions directly inside strings. They are very useful for building strings from mix of literal text and data, like in the getSummary() method example.

💡this.property

Using 'this' gives access to properties on the calling object. So this.birthYear inside calcAge() refers to the birthYear property on the Jonas object.

💡dot notation

The dot notation is used to access properties and methods on an object, like jonas.calcAge(). The part before the dot is the object, and after is the property/method name.

💡DRY principle

DRY stands for Don't Repeat Yourself. It's a principle for writing cleaner code by having each piece of data stored in a single place, instead of duplicated.

💡turnery operator

The turnery operator provides a shortcut for if/else statements. It has a condition, and returns one value if truthy and another if falsy. It is used in getSummary() to return 'a' or 'no' based on the license property.

💡arrays are objects

Arrays have built-in methods like push() and pop() that can be called on them. This is because arrays are actually a specialized type of objects behind the scenes.

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.