All language subtitles for 011 Revisiting Objects & Classes_en

So now that we learned about functions,

I want to come back to values.

And specifically, I want to come back to objects.

As you should already know,

objects in JavaScript

can be used to group multiple values together.

So for example, if I have a user name, which could be Max,

which typically of course would not be hard coded,

but might be fetched from a server

or from some HTML input on the page,

and I have a user age, let's say, of 34.

I could group these values together in an object

so that instead of defining them like this,

I could have a user object,

which is created like this

by using opening and closing curly braces

on the right side of this equal sign here, like this.

And then there I could have a name property, as it's called,

and a age property.

So I have key value pairs

where the keys are up to you,

but should follow the naming rules

you already learned about.

They also should, of course, be descriptive.

And then separated by a colon,

I have the value that should be stored under that key.

Now, this object could be used to output it

in the console, for example.

If I refresh this page here, I would see my user.

And in this JavaScript console,

I can actually also explore it,

but I can also access

individual fields of that user object here,

or of any object,

by using the dot notation.

And then for example, I can just access and output,

in this case, the name field.

So there, for now, if I reload this to get rid of the error,

I would see "Max."

And this dot here is the key

to accessing values in an object.

You use this dot notation to get access

to a value in an object.

Now, besides key value pairs like this,

objects can also store functions,

which we then typically call methods.

For example, here I could create a greet function like this

without the function keyword,

just the name of the function you want to have,

followed by the parentheses,

which could accept parameters if you wanted to,

And then your curly braces.

And here you can return something,

or for example, simply console log something.

And then you could access this,

again with the dot notation,

and execute it like any other function

by adding these parentheses here.

With that, if I reload this,

I would see "Hello!" here.

Now, if you are in such a method,

so in a function that belongs to an object,

you can also access the properties of this object,

so the other methods and fields

that belong to this object,

with help of the special "this" keyword.

This would, for example,

allow me to output the age here

by using this, which refers to this object, .age.

And with that, if I reload this,

I would output the age here.

The this keyword won't be too important for this course,

because we won't create too many methods here,

but nonetheless, it is a JavaScript concept you should know.

Now, when it comes to creating objects,

you can either create them like this

to group values together,

or you can create blueprints

by using the special class keyword.

This is also an approach

we won't use too much in this course,

but I briefly want to mention it here.

With the class keyword,

you can create a blueprint

that can then later be used to create the actual objects.

Here we could create a blueprint called "User," like this.

And what's important here is that for class names,

you should start with a capital case character.

And then here you could, for example, add your methods

that should be part of that blueprint, like this.

In addition, you can add a so-called constructor function

by using the special constructor keyword,

which other than that

is written like a normal function though,

and you can use this constructor for accepting parameters,

input values, like name and age, for example,

and then store them in properties of the object

that will be created based on the class

with help of the this keyword again.

So that's how I would create properties

named "name" and "age"

and store the parameter values "name" and "age"

in these properties.

Now, by doing that alone, we won't achieve anything yet.

Instead, we can now use such a class blueprint

by instantiating it with help of the special new keyword

which creates a new object based on that blueprint.

And then here I could pass "Manuel" and "35" as values.

And if I now console log user one here,

I would be getting an object, this object here,

that is based on this blueprint.

So this object here is based on this blueprint,

and therefore it contains the values I passed

as input parameters to this constructor here.

That's how these things work together.

In addition, this user one object

would now also have a greet method

because I defined the greet method here.

So that's where this "Hi!" is coming from.

Again, we won't use this class keyword a lot in this course,

but you should know about it.

But with that, that's it for objects.

I'm going to comment out of this code here,

and we can continue with the refresher for the next concept.