Check out a free preview of the full JavaScript: From First Steps to Professional course
The "Objects Exercise" Lesson is part of the full, JavaScript: From First Steps to Professional course featured in this preview video. Here's what you'd learn in this lesson:
Anjana provides an exercise to practice creating objects and adding properties. A student's question regarding creating sub-objects within objects is also covered in this segment.
Transcript from the "Objects Exercise" Lesson
[00:00:00]
>> Let us try our hand at object summoning. So, we're gonna take a moment to create an object that represents you. And you get to decide what properties this object has and what values those properties point to. So for example, in my object, I'm going to declare with const cuz I'm not gonna change, I'm gonna be Anjana the rest of my life.
[00:00:26]
So I'm gonna name it Anjana. And in this object, I'm going to declare some properties that matter to me. Like my home is in San Francisco. I speak a few different languages. So I'm gonna make an array value for different languages. I don't have a pet, which makes me very sad.
[00:00:44]
So pet is null. I have a Vespa that I drive around. So that's my vehicle, and I have an array of different hobbies. Now you get to decide what is in your object. Let's say put a name cuz your name is how we refer to you. So let's have a name property, and then whatever other properties you want of stuff you care about.
[00:01:04]
Think about what you wanna name the property and what type of value it makes sense for that property to point to, okay? All right, let's take a break and make our self objects. All right, so we got our objects, we got ourselves in JavaScript form. What properties did folks put on their objects?
[00:01:27]
Anything new that I didn't have up here? So we talked about one, for example, maybe you have more than one vehicle. So OJ, you put what property?
>> Vehicles.
>> Vehicles. And what kind of value, what type of value does vehicles point to in your-
>> In another array.
[00:01:48]
>> An array, right, for multiple things. Cool, did anybody else declare any other properties on their object?
>> I put my kids names.
>> Kids, kids is a great one. Or kids names, yeah. Anything else? Maybe from the chat, yeah?
>> Pet type.
>> Pet type, yeah. Pet type, exactly, and what value did you have for that?
[00:02:13]
>> Dog.
>> Dog, so string dog, gotcha. Nice, cool, so this is just suffice it to say that objects are whatever we make them to be, we can decide what the properties are.
>> In chat, they put programming languages, JavaScript and Python.
>> Yes, programming languages. Everybody now at least has one new programming language to add to their objects, which is JavaScript, we're working on it.
[00:02:38]
>> So if you want to do like pets and you want it to have multiple values, can you create a sub object within the pet kinda thing and it says, I don't know, dog one, whatever, dog two, whatever?
>> Yeah, so we have here, we already have a couple of examples of using an array as a value within the object to store multiple things.
[00:03:01]
In my example, it was languages and hobbies are both kind of plurals. So we have multiple things in an array there. But we'll actually a little bit later, see that we can nest objects and arrays within each other, as much as we want in JavaScript. So we can create kind of like a Russian doll situation.
[00:03:18]
We'll look at a couple examples later, great question. We had a question about array.join, and I would say that in general, if you're wondering, does this particular thing like .join, does it work with this time value? Or does it work with that kind of value? Or what happens in that case?
[00:03:38]
So I would say as I have been saying the whole time, you can check out the full documentation on MDN. To figure out what type of stuff you can pass into it, what options you have, like for example with join, you don't even have to pass in a separator and it will just join them with no separator.
[00:03:58]
But if you're wondering kind of like what happens if I pass in some other separator there? Then you can check out the documentation, and usually that'll answer your questions, as generally, usually that'll answer any questions you have about a specific operator or keyword or a spell on a string, that sort of thing.
[00:04:23]
We had another question about another specific method, which is called freeze, Object.freeze. This is a trick in JavaScript that we can use to essentially freeze an object in place and make it immutable ish. There's an asterisk on that, make it immutable ish and never be able to change from how it was when it was declared.
[00:04:50]
So for example, I could freeze my Anjana object if I think I'm never gonna get a pet, let's say. My pet is always gonna be a null. That would be a very sad life. I hope I get a pet someday. [LAUGH] But I could freeze it in place so that I cannot re-assign to the properties I already have.
[00:05:10]
And I cannot do what I did before when I did dot snack equals and just insert a new property in there. So again, if you wanna know more details about how freeze works, check out the MDN documentation. And then I think we had another question about the spread operator or spread syntax.
[00:05:31]
Is that right?
>> Yeah.
>> And that is something we are going to come back and talk to later, talk about later in the course. Talk to, I guess we could talk to JavaScript. So let's put a pin in that. We're gonna come back to that later. But if you wanna get a jump on things, you can look up dot, dot, dot in the MDN documentation
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops