Intro to Objects

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

I've written a program to tell you juicy details about

Winston, but not too much because Winston likes to keep some

mystery. That's just the Winston way. So, let's

see how I did this program. I created some variables at the top to store bits of

information about him. The first variable holds a number - his age - the second variable holds

a string - his eyes - the third variable holds an array of strings,

which are things he likes doing, and the last two variables hold

strings which describe where he was born. Then

down here, I wrote each of these out using the text command and just using the variable

name. And of course for the array, I have to access each element of the array

using bracket notation. Cool. Now,

all five of these variables are describing information about the same thing: Winston

But the variables don't know that they're about the same thing

And, you know, in Javascript, when you wanna

store multiple pieces of information that are related, we have a better way of

storing them that's really cool, and it's called an object.

So what it means is that instead of 5 variables, we can have a single

variable that stores all this information, which is pretty cool.

Let's try it out with Winston's information. First, we'll declare the

variable and we'll call it Winston. And then

we put an open curly bracket - make sure it's curly, not square -

and a semicolon. So we've created an object

but it has absolutely no information inside of it.

So, to add a bit of information, we need to add properties.

And each property is a key and a value. For example, age would be age: 19

Okay. And then for eyes, we're gonna add a

comma, and then eyes: "black". Okay, cool,

so now Winston has two properties inside the object.

Uh, for likes, we can just go likes: and then I'll

just copy paste this from up here... and

very nice. So let's look at this. Winston has three properties

Every property has a key, which is what's on the right

hand side, and a value, which is what's on the left-hand side.

For the key, it should follow the same rules as Javascript

variable names. No spaces, start it with a letter, all that

For the value, it can be any type of value

we've seen so far. It could be number, it could be a string, it could be an array

It could even be a boolean, so we could add isCool: true, of course

In fact, the value could even be another object. So,

BirthCity and BirthState. Those really are bits of information about the same

thing, which is a single location. And, so I think it be make

more sense if we stored it as an object. I'll add another key, birthplace,

and then for the value I'm gonna put my curly brackets again

and then inside I'll have key for city,

"Mountain View", and then state,

"California". Great! So now you can see, you can really

store very rich information inside an object.

All right. So now that we have this nice object that describes all this information about Winston,

let's try deleting those old separate variables

that didn't know about each other. Okay

Um, uh oh! Uh so now we've got an error. And that's because our

text commands are referencing the old variables. We need to update

them to use information from the object instead. Let's

start with just commenting out the last three so that we can

do one at a time. Okay. So it says WinstonAge

right now. What we need to do is replace that, so we'll type

winston, cause that's the variable name. Notice if we

just leave it like that, it says object object. That's really

gross. That's Javascript telling us that we're trying to turn an entire

object into a string value. But instead, we really just

wanna access only the age inside of it. So what we do is we put a

dot, and then we write the property key, which is "age".

Tada! We have the age. We call this "dot notation,"

which is where we write the variable name for the object, and then a dot,

and then the property key. Okay, so we can

go and do more now. Let's uncomment this, and then instead of Winston

eyes, we'll just say winston dot eyes, and then

for this one, it'll be winston dot likes,

and then winston dot likes one, and then

for this last one, it's a little more complicated because

it's an object inside an object. So we're gonna say

winston, and then dot, birthplace,

but if we do that it's still just the whole object so then we have to say dot,

city. Okay let's do this here... winston,

dot, birthplace, dot, state.

Tada! So it's really cool cause you can just reach down inside the objects

that are in the objects. All right

Awesome. So, as you can see,

objects are a great way to store a bunch of related bits

of information about an object, and then be able to access it later.

And when you keep going, you're gonna find out just how awesome objects are!