Working with objects
Viewers: in countries Watching now:
- Creating variables, functions, and loops
- Writing conditional code
- Sending messages to the console
- Working with different variable types and objects
- Creating and changing DOM objects
- Event handling
- Working with timers
- Building smarter forms
- Using regular expressions
Working with objects
So I can say getTime or getFullYear, and as soon as we start touching our web pages, we'll have other objects that represent all the different pieces of the page, what's referred to as the DOM or Document Object Model, and we can even make our own. So we're going to get comfortable working with objects. And at its core, the idea of an object is really simple. It's just a container that gathers together some data and some behavior. So we know how to make variables. We know how to make functions.
An object just allows us to gather variables and functions that belong together and give them a name. So let's say here I'm making some regular variables: playerName, playerScore, playerRank. It's just creating those three in memory. And I realize that really these belong together. It would be nice if I could enclose them in a larger object. Now, I could do this in an array, but I don't really want to have to worry about the 0, 1, 2 whole idea. So what I'll do instead is I'll run this line.
First off, I'll say var player--again, I'm still creating a variable--equals new Object. This creates me a generic object container and calls it player. What I then do is just decide, what do I want the internal pieces of this object to be? So in this case, player.name = "Fred", player.score = 10000, player.rank = 1. So when we do this our data is now one level deeper. It's inside this player object.
So we use what's called dot syntax to say this object dot this variable. Although officially speaking, when they're outside an object we call them variablesm when they're inside an object we call them properties. A property is really just a variable that belongs to an object. Now, because it's quite useful to do this, the same way that there is shorthand for creating arrays, there is also a shorthand for creating an object. I create a new variable-- I'll call it player1-- and I use the curly braces. Now, here I'm not using them to surround a if statement code block or in a while loop.
This is a shorthand for creating an object. And then inside the curly braces I use this name value pair, in this case three sets of information: name: "Fred," score: 10000, rank: 1 and it creates the object and those properties inside it. And then I could just do another line of code and create player2, use the same format, but create a different object with different properties. And in this fashion I could get to player1.name, I could get to player2.name, player3.name, and so on.
So if we create a couple of objects, it's very easy to then write out information about each individual object. In this case, we'll write out console.log(player1.name). That reaches inside the object and writes out Fred. But it'd be nice to do a bit more to this. What I'd also like to do is associate some behavior with these objects, not just some data, not just some information, but what can player1 do? What can player2 do? What would be nice is if we could create a function called say playerDetails and that one I'll just put a comment inside this right now that this should display information about each player.
Now sure, what I could do is just define this function independently and declare it as accepting a parameter, but I'm not going to do it that way. What I'd like to do is make this function part of these two objects. And the way I need to do that is to associate it with the objects themselves. What I'm really doing here is making this a method of my objects. So what I'd like to be able to say is say player1.showDetails or player1.logDetails and have it call this function. I am associating this function with this object.
And it's completely up to me how I want to do this. I'm going to say player1.logDetails. You might think, well, where that this come from? I'm just making it up right now, and I'm setting it equal to playerDetails, which is the name of the function. I'm not calling it here. I'm not calling that function at all. I'm just associating it with my player1 object. And similarly, what I want to do is exactly the same thing with the player2 object. So what does this do? Well, now both of these objects actually have a method called logDetails, and if we call it, it will just reach through and call the playerDetails function.
Okay, so what. What will it do? Well, I'd like to actually, let's just do a console.log message here, information about the player. If I think, well, I want to write out the name of the object, but I don't know whether I'm going to be doing player1.name or player2.name. I just want to do one at a time, and I could call this for either. Well, here's the thing that we do. If I know this function is going to be associated with different objects, what I can use is the word this to refer to the current one.
So whatever object it is, I'm going to go into its name property, or its score property, or its rank property. So I'll put together a bit more of a message, this.name and a little string has a rank of, and then we use the concatenation and just to make it clear I'll split it across a few lines, this.rank. Close the console.log parentheses, close the semicolon. Now, right now if I ran this code, nothing would actually happen, because I've defined the function, I'm creating the objects, but we don't have any information coming out.