Stop Low Resolution Sign

Transcript

Tutorial Area

Transcript of the tutorial.

TOP
Tutorial
          So we know that when we want to create multiple objects of the same kind like users in this case, then

object literal notation is not always the best way to do that.

By copying and pasting these objects over and over and over.

Now, it would be nice if we could do something like this instead.

Whenever we want a new object, just say new user and pass in the values for the different properties.

And we can do this in JavaScript and we can do it in a couple of different ways.

Now one way is to use the prototype model directly, which is the original way that we did this in JavaScript.

But with the release of ES6, which is a newer JavaScript specification, we can now do this using the

class keyword as well.

Now classes are just a bit of syntactic sugar, meaning that under the hood it still uses the same original

prototype model that we used before classes came about to do this kind of thing.

But classes aim to make our code a little bit cleaner and easier to understand.

Now we will be learning about the prototype model and the inner workings of what's happening under the

hood later on, because only then will you have a real understanding of how objects in JavaScript really

behave.

And because, like I just said, classes in JavaScript are just a bit of syntactic sugar to make working

with objects a little easier.

But to begin with I want to gently introduce the idea of classes until we get a basic grasp of what

object oriented programming is all about, and then we'll dive deeper into the prototype model under

the hood.

So then a class is like a blueprint for an object.

It describes how to create one with all of its base properties and functionality.

So, for example, imagine in real life we had a blueprint for a car.

Now, that blueprint would describe all of the basic properties and functionality of a car.

It has properties like a color and a model, an engine size, and it has functionality, things it can

do.

It can drive reverse and brake so that blueprint for the car maps out all of these properties and its

functionality and all cars created using this blueprint would have those things.

Now, that's not to say that every car should be completely identical.

Some of the properties could be unique to each car, for example, the color of it.

Some could be red or others green or there's blue, etcetera, but they still all have a color property.

So when we use this blueprint to create cars, we could specify some options like the color.

We could say we want a new white car or a new yellow car or a new green car, and all of those cars

are still going to have all of the same properties and functionality they can all drive.

Reverse brake.

ET cetera.

They all have a make and model and a color.

It's just that we're giving them different values for some of these properties.

Now the same principle applies to objects in JavaScript.

Only In JavaScript we use a class to describe the type of object instead of a blueprint.

So this would look something like that.

We'd have a class which describes what properties and what methods an object should have.

In this case, a user class could have a username, email, a login function and a logout function.

So every user created with the user class would have these properties and these methods.

But again, each user could have a unique email and a unique username.

So we could say new user pass in a username and an email, create another one, pass in a different

username and a different email and so forth.

But each time we're using the user class to create a new user object and they all have these properties

and all have these methods, but the values of some of the properties can be specified when we create

that user so that they're unique.

And once we have a user class defined and stored somewhere, we can then call upon it from anywhere

in our application code to create a new user object.

So we know that classes are a bit like blueprints for objects.

Let's now try to create one.