All language subtitles for 004 Defining & Using a First Class_en

So I mentioned this concept of using classes and we haven't worked with classes at all in this course yet.

Classes allow us to build objects in an easier way or to build objects based on some blueprint to be

precise.

So we have objects and we have classes

and the idea is that objects are the things we work with in code and we worked with objects a lot in

this course already.

Now classes are something we can create in Javascript too, which do not replace objects but instead which

allow us to define blueprints for objects so that we can easily recreate objects based on these classes

because indeed objects then are also called instances of classes. So we can create an object based on

some class thereafter and therefore a class is just a definition of how the object looks like, which

properties and methods it has,

the place where we store our logic and then the object is the concrete thing we build based on that

class with which we work in our code. So this class based creation which I'll show you in this module

is an alternative to using object literals.

It's not always better, object literal notation is great if you will just want to quickly group some

data together but it's awesome to use classes if you have reusable logic which you wanted to define in

one place and then create multiple objects based on it.

So classes can make the creation of multiple, similar looking objects where the data differs but not

the structure much easier. So let's translate this code which I wrote here into a class-based system

and let's start with this object in this array. This object always looks the same and as I mentioned,

we could create a function that builds us such an object, well a class in the end is such a function,

it's just a different more powerful way or an easier way of writing such a function.

You add a class in Javascript by adding the class keyword just like this,

it's a reserved keyword

and then any name of your class,

the convention is to start that name with a capital character,

so here for example Product, like that. If you have a word that consists of multiple words like product

item, you would write it like this every sub word starts with a new capital character,

there must not be any whitespace or dashes in there, that would all be syntax errors.

You could theoretically also name your class like that starting with a lower case character but the

convention is to start with an uppercase character.

So now I got my product class here and then you add curly braces to define what's inside of that class

and what's inside of that class is basically your blueprint of how an object created

based on that class should look like. So you define which properties such an object should have and which

methods it should have.

Now for that, you go into your class here and there,

we can add a property or here we would call it a field and I'll come back to the difference in a second,

it's not that big, by simply adding it in here, for example title and then you can assign a default value

here because keep in mind the product class will always act as a blueprint,

that's why I'm saying default because typically you'll assign a new value but we can create a default

value of let's say default here.

Now one important note which you can see right away, inside of this class definition, you assign values

with an equal sign, not with a colon which you would do an object literal but with an equal sign and

you end a line after such a field with a semicolon, not with a comma.

That's one important difference

and classes do not replace objects as you will see, instead

as I mentioned multiple times, we build objects based on classes. So we might have a title, an imageUrl,

which could be an empty string or you just don't set any value at all,

then it will be undefined initially and also a description and also a price.

Now this would defined that objects based on product

will have these four properties thereafter.

Now I mentioned, I call in fields here

once we create an object, based on such a class every field will be translated to a property in that

object,

that's how that's related,

we just call it field here because the class is not the concrete thing with which we work here,

instead it's just a blueprint,

it's just a definition of an object and what becomes a property in an object is just called a field

here,

however for the rest of this course, I'll also use these terms interchangeably because in the end they're

closely related.

So now that's how a product would look like.

Now the question is, how do you now create an object based on such a class? Well you go to the place where

you need it,

that could be here in your global script or here in this array of products and then you refer to the

class name, product, you execute it like a function and very important, you add a keyword in front of it,

new and we've seen this new keyword before in this course,

I sometimes showed it. New in the end is a keyword Javascript understands that together with such a

function execution which is based on a class, it's not a real function but still, should basically create

a new object,

that's what new together with this function execution does. Neither of the two alone works,

we have to combine them.

So now this gives us a new product object,

this returns a new object which has this structure and therefore indeed if we comment this out for a second

and we just go here and we console log new product to have a look at how this looks like, such an object,

let's save that.

Since I added this globally, it should execute right away when a script runs and then reload this page,

also make sure you're using Chrome because classes are not supported in old versions of Internet Explorer

for example and I'll come back how to still make them work there in the browser support module. So reload

your page thereafter and what you should see is this object which is getting logged here which has a

title property with a value of default,

please note that this is a regular object with a regular property

hence we have a colon separated key-value pair and then we have the three other properties which are part

of the object but which have no value because we haven't assigned one here.

So that's the first step towards classes, we now know how to define one

but it's not that useful yet. When we create a product based on such a class, it would be nice if we could

create it with some initial values. We could of course assign all values in here

but then all products which we create based on the product would have the same values.

Instead I want to make sure that when we call new product, we can kind of pass our initial values here

to new product so that we can create a new object with some initial values.

Of course by the way, we could of course create a new product like this and then just assign values with

the dot notation but that's not what we want to do, we want to create it in one go,

so let's have a look at how that works in a second.