Stop Low Resolution Sign

Transcript

Tutorial Area

Transcript of the tutorial.

TOP
Tutorial
          Okay then.

So in this video I thought I'd just do a quick recap on object literal notation and also just demo why

this isn't always the best approach to creating objects when we're creating a lot of objects of the

same kind of data.

And you'll see exactly what I mean by that shortly.

So first of all, notice I've created this chapter 15 folder.

I've got index.html with a sandbox dot JS file hooked up right here and I'm viewing this page in the

browser.

Now I've also kept the weather app around because later on in the chapter towards the end we'll be applying

our object oriented principles to that project.

So then object literal notation.

We've seen all this before, but I'm going to recap you now.

If I wanted to create a new user object, I'd do something like this.

Const user one is equal to a new object.

And then inside we specify different properties such as a username.

In this case it's going to be Ryu and maybe an email as well, and that will be Ryu at the net ninja.co.uk

or some email address.

And then maybe we'd have a few different methods as well, a login method and that is literally going

to say console, dot log and the user logged in.

And we might also have a log out method which is going to say console dot log, the user logged out.

So very simple methods, but this is just demonstrating object literal notation and we have seen all

this before in a previous chapter.

So now if I wanted to access one of these properties I could do, I'm going to say console, dot log

and then user one dot email and also user one dot username.

And I should see these in the console over here and we can see those right here.

And I could also call one of these methods, for example, log in by saying user one dot login and oops

like that.

Okay, so this logs this to the console.

So this is all working, but what if at some point down the line I want to create another user object?

User two Then how would I do that?

Well, I would pretty much write all of this stuff out again for user two, so let me just copy that

and paste it down here.

We'll call this user two and we'll change this to chun-li and the email to chun.li at the net ninja.co.uk

log in is going to remain the same and log out is going to remain the same as well because these two

methods are going to be the same for every user.

So now again, I could do exactly the same as this, which I will do.

I could change this to user two and user two over here and finally over here.

So now we're getting the email and the username from user two and also using the login method from user

two, save it and we see all that right here.

So again, this is all working.

And what if I wanted a third user?

Well, again, I would write out exactly the same object, but this isn't making our code very maintainable.

We're rewriting a lot of the same code.

You see things like this, the log in and the log out, they're identical in each object and we're just

repeating ourselves and even the property names are exactly the same in each object.

Again, we're repeating ourselves, and if we want to create a lot of user objects, it's going to get

even more messy.

Just copying and pasting this and changing the different values over and over again.

So this approach of using object literal notation to create new users over and over again is not the

most efficient way.

Yet it's good for creating 1 or 2 objects.

But if you're creating many objects of the same type and you quickly want to be able to generate those

objects, maybe it's not the best way.

It would be much nicer and easier if every time we want to create a new user object, we could do something

like this const and then we'll call it user three this time.

Set it equal to a new user pass in the email, which is going to be Sean at the net ninja.co.uk and

also pass in the username which is going to be Sean.

And then that would create us a new user object which would look much like this with these two values

for the username and email and also the login and the log out method.

Now we've seen this kind of syntax before when we've said something like new date or new error or new

XML http request object.

And all it does for us is create a new object and it uses this constructor to create that object with

all of those methods and properties.

Now obviously in this case this is not going to work because there's no user constructor built in to

the JavaScript language.

But we can.

Make one.

And this is where object oriented programming is going to give us a leg up.

It's going to help us to easily create objects for different types of data.

For example, a user object which is going to make our code much leaner and more reusable, and we're

going to see exactly how we can do this in the next lecture.