Teaching my 40 year old student with no experience programming | Arrays and Objects

All right.

When you get your first job, you got one of these for you, dude.

Oh, did you make it?

Yeah, I made. I made two of them. Yeah. No, these are all custom.

Really?

Yeah.

Dang. I only, like, go to. What's that? Oh, dude, this right here is coupong special. Oh, it's cute.

So you can think about objects and arrays like. Like an empty bucket, and you're putting things into it. Arrays are kind of like a list. They automatically get an index. Their index starting at zero. An object is a little bit more organized and a little bit more powerful, in my opinion, to do a key value pair. So you can organize it and. And say, like, fill and then put more data inside. And objects and arrays both have their. Their use cases where they're used. But the one thing about objects there, you cannot have two of the same key inside.

Okay.

But arrays can hold the same item. Objects are key value pairs, and arrays are like lists of data. Objects can even hold arrays or other objects. Arrays can hold objects or other arrays. So they're just data types. In the end, if I say obj equals a and we'll just maybe make it 0, b, 1, c, 2. This in the front is a key, and it can map to a value. And this value can be anything that we learned from last time. String, number, boolean. And now if we learn two, when we learn two more, they can also equal objects or arrays. So we can say B equals true and C equals C. All right, so that's what an object looks like with three key value pairs under number one. I have an exercise. Can you try to make an object with three key value pairs? So three keys and three values?

So I got string, number, and boolean.

All right, great. And maybe for record my opinion, it would be like wins and losses. So I would. I would do something like a string like 15 and one or something like that.

Okay.

I feel like when you're coding, like, even the keys and everything, they should be very semantic. Like, it should be very descriptive of what you're doing. So maybe I would just put, like, WINS and then 15, if this is.

Okay.

Something like that. I don't. It's just a good practice, and it helps you, like, you won't get yelled at later at the job. So you have a team here. That's an object. The mascot is a bear. Wins, 15, losses, 1, and travel false. Great, great. Awesome. You understand everything up to here, right?

Yes.

Okay, cool. I'll just show you an example of where you'd use an object is cafe, dot, neighbor, Dot com. Let's do something like this. Okay, so I know this is a Korean website. It looks this right here. It can be made with an object, right? There's a title here, there's a description here, there's likes, there's comments and there's a picture, right?

Yeah.

So if I open this up and I kind of go to the network and I refresh. Let me see here. So maybe right here. Can you see my screen?

Oh geez. Yeah, yeah. So we got like the item object.

Yeah, maybe this would be. So this is a whole object, right? This here. And then the type is an article. So it's telling you that it's a card on the website, but like an article. And then the item that's within has stuff like rank, cafe id, article id, the name of the cafe and all this kind of stuff. Comment count, like count and a whole bunch of data. So it's. They're like one word descriptive kind of keys that help the server talk to the front end, the client and you can put the data in the right spots. That's how it kind of works. Like Facebook, Instagram, they all work in the same kind of way. Like they get a JSON object and then they. And then the front end job is to kind of prettify, prettify the JSON object and put it on the screen. Maybe you can open up the inspector on like one of some of your favorite websites and then go to the network tab. You'll find the menus, you'll find that, you'll find like these iPhone 15 Pro Max. You'll find all the kind of text within this, which is pretty cool. So if you just find it, it'll be really interesting for you, I think. Okay. And I'll show you how to do it again. Do you have a favorite website or something?

Jeez. I'm trying to think of like what I go to.

Let's stop being Internet pirates for a second. So we made an object with three key value pairs. So if I were to make. Let's make const. Chew. What keys do you think you'd need to define a shoe?

Geez. Color.

Size.

Color.

Okay. Like size.

Male or female, kids. Like it would be gender, age, Age. Yeah. Brand. The price, I guess sale might be something else, but just the price.

Price would be good.

Okay. And I guess like that issue I have every time at ABC Mart, the shoe store here is like, is it actually in stock? Like I don't know if that's going to be there or not. Like.

You can say Quantity. Right. So like quantity would be a number. Color would probably be an array because it has to be like a, There could be a black one, there could be a red one, be a brown one. And size. Maybe you'd put like a range or like you could just put all, you could list all the sizes, like 250, 255, 260, whatever. Like, you know what I mean?

Yeah, yeah.

And then a gender could be like just. This is a, a male shoe age. Maybe you'd have like another place where you say like const. Age types or something like adult male. And this, this would be like a case where you use like an array. Adult male, adult female.

I see. And kind of run down the list of.

Yeah. Kids or something. Yeah. And then inside of this, this here you could be like age types at index zero. Right. Because the shoe is maybe like adult male shoe. And then maybe this would be like Nike price would be $100 and quantity. Maybe there's a hundred of them. And then maybe you have like a, a discount where you give like 30% or something. Maybe this could be a whole like product. Is this kind of like coming together a little bit? Yeah, yeah.

I guess the, the one thing I have is for those arrays that you have within the object. Do I have to. Yeah. So in, so the array for color that you have, do I need to define that color as a separate object outside of that object or do I need to define what black is within the shoe? Within the object of shoe?

So I think I'm understanding the question. Like if there's like a color black shoe and there's more detail to the black shoe. Yeah.

Like, so, like if, if it's. I'm trying to think because like right now it's a string. But maybe like if I were going to define black like with rgb, would I need to define it within the const shoe or do I need to start like a new const. Outside?

So there's, it's case by case really.

Okay.

Like it's very simple. Like it's an all black shoe or something. Usually. Usually like in a real case scenario you'd have like. So we've all heard of IDs, right. So NID would be like, I don't know, like some weird string. Right. You know, that cannot be duplicated.

Yeah.

Right. Maybe you'd have another object called shoe options. Right. Those options would be like maybe options for this ID in another table. Okay. And then there would be something called like options inside of here. And then there'd be like an array, and then that would be like an array of objects. And then you call it like name black. And this one would have an ID too.

Right, I see.

Then this is. Maybe you'd have put like RGB here. And then this would be like, wait, what is black? It's like 000, I think. Right. My opinion, if it was going to be red, I'd make another object here. I'd. I'd make some weird ID like this. Let's just say name and then red and then rgb. I forget. I think. I think red is the first one. And this ID would be mapped to red in a real case scenario. Okay, let's just get through these. 2, 3, 4, 5. And then we'll end this zoom call and then we'll start the next one. Okay, let's just make an array with three items. Can you do that real quick? All right, cool. Let's go on to line 71 and just make an object with an array as a value. You forgot the equals.

Equals.

And then make an array with objects as values.

Make an array. Computer parts, maybe.

Okay, before you do just like free flow, it. Because the object, you have to kind of think about the structure as well. So in my opinion, before we start, I would be like, okay, this object, okay, it's going to have three keys. What are the three keys for? Computer parts. Maybe we'll put name as one of the keys. Maybe price.

Watts.

Okay, Watts. All right.

Wattage maybe.

And this could be like a number. Price can be a number. I would kind of think about it like this before I started writing this object out a little bit. So I could kind of like do it a little bit faster than like on the fly. My opinion.

But I want multiple objects inside of this array. Right. I'm not entirely sure if it's this.

This is correct. So you'd make three objects like this and one more down here. And this would be make an array with objects as values. So you'd have three objects in this array. Right. And then maybe one could be Ram. Price would be like 10 watts. I don't know this one. I'm sorry, I don't know. I don't know. And then another computer part. What is another computer part?

Ssd. Let's go over that. Let's just assume there's one in there.

Okay, awesome. So let's use computer parts array and do number five. Make an object with an array of objects as a value.

Make an object with an array of objects as a value. Make an object. So Maybe you can use computer parts.

Yeah. So maybe you can make like a computer parts store object and then you can put like inventory, and then you can put computer parts. I'm going to start it off for you. Let's do computer parts store. And that's going to be our object.

I'm going to do the array with an array of objects as a value.

Right.

Couldn't it be this, the actual computer parts?

Yeah, sure.

So then I could use ram, ssd.

Okay, I see what you're doing. You're trying to map this, this name here. Right. Okay, What I meant was just with an array of objects as a value. So you could just use computer parts here actually, just like this, make an object. So we have an object with an array of objects as a value. So this is an array of objects.

Okay.

Yeah. And then me personally, actually, when you just put computer parts, this works too. Because ever since ES6, if a variable name is the name of a key in an object, it maps it.

Oh, automatic.

Okay. Automatically. So that's pretty cool. Like this. This if you logged it out. Right. So computer parts store equals computer parts store. So you see how it says computer parts store. There's a key. There's a key.

Computer parts.

That's the magic of ES6. But it would be the same as if you put a colon here. Computer parts. Computer parts. And this is the exact same. Okay. But my opinion, I would have put inventory. Something like this.

I see here.

Let's just break that down. So number one, let's make an object. Okay. To make value with array of objects. So an array of objects is what we created for computer parts. Right. So I wanted computer parts as a value. So earlier we put like one Nike as a value. We put size. We put this. 250. 255. 265 is a value.

That's my array.

Yeah.

Okay.

That's an array of numbers. Right. I wanted an array of objects as a value. This is an array of objects. Right. Like name Price Watts is one object. Name Price Watts is another object right here. So this is an array of objects. Right. So this is a data. Right. Array. Arrays. And what I want inside of the array are objects. And I want it as a value within this object. If we go back Here to shoe, ID is a string. ID is a string right here on line 55.

Yeah.

So the value of ID is a string. Right. So the value of color. Let me put colors. Colors is an array of strings. Right, Right. Okay. The size. Size is actually. Sizes is an array of numbers. Right. So if I were to put here, like, I don't know, like, seasons, season discounts, I. Maybe I could put an array of objects. Right. Like, right now, if it's season, summer, you can put discount rate at 0.4. And this would be an array of objects. Right. Winter rate, 0.7. I don't know. Something like this.

Again, I have my key season discounts, and my value, my whole value is now that array versus my season discount being 0.3. Like, just regular discount. Because.

Right.

Discount is my key. My value is 0.03 season discounts. My value is this whole array. Okay. That was. That's what was messing me up, I think just that wording and I was. Was a follower.

As long as you got it 100 clear. Because you're gonna see, like, a lot of vocabulary like this moving forward. So right now, if you don't hammer it out, you're going to get more confused later on. So can we complete this, like, computer parts store? Like, I never gave you a key in this part, right. And it was kind of like, ambiguous. It was just like, hey, make a value, but make the key whatever you want. So on computer part store, can you fill out more information about the computer parts store? Like, maybe it'll have an address. Right. So a key of address. And then the value would be. What do you. What would you expect the value to be in address?

Just another string.

Right? Right. So let's just put Seoul or something. Okay, Whatever. One, two, three Oak. Is there no street or avenue or lane.

You've never been to 1, 2, 3 oak? How do you not know, man?

What about phone number?

That have to be a string, too? Because I have, like, I'm doing dashes even, I guess, if you want. Like, who's managing this particular location? Like, Steve is.

All right.

I'm trying to think of something that would be another array there, but array of objects.

Maybe employees.

Yeah, employee employees.

Then maybe just put two employees with the name and age. Wait, an array of objects as a value.

Name, phone and age. Age. 555 8989. I'll be really happy if somebody knows who Mark, Tom and Travis is.

That's my favorite band.

Really?

Right.

There you go. Because I want to say I have a key with a value that is an array, but that's not how we've been saying it.

An array of objects that looks really good. And so we have an inventory, and that is an array of objects. You have an address at the string, a phone number. That's a string manager, Steve, employees with an object with an array of objects and you have employees. Cool. Did leave two references that I want you to read. It's just the MDN Mozilla docs. There's a bunch of methods for objects and a bunch of methods for arrays. And I think we did like, like I told you two of them, like find and filter over the weekend. But I just want to show you like if I. If you look at the terminal here and we run this and say, I don't know what computer parts store is, right, But I want to see the keys, I could do something like if I wrap it in object keys and I use the computer part store as an argument, it'll just give me the keys as an array. So if you see you have your computer parts store has inventory, address, phone manager, employee.

I see.

Okay, so object keys, okay, you have object values which will give you the values. So this one only gives you an array of the values. Right.

I see. Okay.

And then you have one more that I use a lot, entries. So entries will give you an array, the first index being the key and then the second index being the value. Really useful because there are a lot more methods to use with arrays than objects like filter, map for each and array is iterable. And you'll find out more about that when we get into for loops. But an array is much more easy to look through one by one than an object is. An object is a little bit more descriptive. In an array you get to kind of start at zero and go to the end. And then you can say, hey, when it go, if the name is Steve, give me all the information about Steve. Because I don't, I don't care about the rest. So we will get there. But arrays are much more easier to work with. But objects are, can hold much more data. Okay, so like in our tool belt now we have logging, we have console log, we have variables like constant, let, we have data types string, name, number and boolean. And now we have these non primitives that are objects and arrays. And we have operators like plus and compares. That's basically all coding is. And now we have the if, else and for loop that are going to help us play around with that data, okay?