در حال بارگذاری ...

Creating an Object0:28

And now we can provide keys and values. So a person has a firstName, and we add a colon to separate keys and values, and then we can give it a value, in this case, the string of my first name. Let's do the same for my last name, and add my last name here as a string as well. And how about an age, let's say 20. So again, this is the key, and this is the value, separated by a colon. Now the key should be a string, but you can see here that I didn't define it as a string. And in this case, it will be converted to a string. But if you want, you can explicitly make it a string. So if I do this, that should be fine as well.

Accessing Properties1:30

preserved. So if order does matter, then you want to use an array instead. Now if you just want a certain value, we can use the dot notation. So for example, if we wanted just firstName, we can say person.firstName, and that should work. Or if you wanted just the age, that should work fine as well. Let me change this to lastName here, that should work as well. And like I said, you can define the keys as a string as well, and that should be fine. Let's try that out. But you don't have to, and it will be converted to a string.

Using String Keys1:57

Let's try that out. But you don't have to, and it will be converted to a string. And generally speaking, you'll see it defined like this. However, there are some cases when if you don't define it as a string, then it won't be valid. For example, if we add special characters like a dash, say last-dash-name, this will not work. You'll see a bunch of red squigglies here, and if you try that, we get an error. So in cases like this, then you do want to define the key as a string. So we can do this, and let's save that.

So in cases like this, then you do want to define the key as a string. So we can do this, and let's save that. And now we get undefined. So let's try person.last-name, and we get unexpected results, not a number. So there's another way to grab the values, and that's using the square bracket notation. So when you do have a special character like we have in last-name here, then we have to use that notation. So we can say person[ and then the key, so last-name, and that should work now. Okay.

Adding Various Value Types2:55

work now. Okay. So again, we can either do person.property, but if the property has a special character, then you have to use the square bracket syntax. Now in terms of the values, so these over here on the right side of the colon, they can be anything. So right now we have strings and also a number, but they can be anything. So let's add a boolean. So isCool let's say false.

So is cool. Let's say false. Let's add an array. So let's say hobbies, and we'll just make it a string array. So we'll say video games and guitar. We can have a nested object. So let's say we have a nested address object, and this has its own properties or its own key value pairs. So we'll say street, let's say one, two, three address street. Oh yeah.

Adding and Deleting Properties4:19

So person, and that should be fine. We have all of these key value pairs, and you can see all of them here. Now what if we wanted to add another key value pair outside of the object? So let me comment this out. Let's add a hairColor key value pair. So we can say person, we can add the new key, say hairColor, and we can add the value here. So I'll say black. And if I save that, we should have that property or the key value pair within our person object here. And it's right there.

object here. And it's right there. Sometimes you might hear these key value pairs being referred to as a property, sometimes a field, or key value pairs. They're all interchangeable. I tend to use all of those terms myself. So how about deleting a key value pair? So say we wanted to get rid of isSchool outside of the object, we can say delete, and then person.isSchool. And now if I save that, isSchool should be gone.

Methods and This Keyword5:09

person.isSchool. And now if I save that, isSchool should be gone. And you can see it's gone here. And how about we add one more thing here. And it's going to be a function, which we haven't taken a look at yet. But again, values can be anything you want. So in this case, the key is called howOldAmI, and it's going to be a function. And for now, we'll just console.log, and we'll use backticks here, I am age years old. Okay, let's save that. You should be able to see that key value pair here, the function, okay.

Okay, let's save that. You should be able to see that key value pair here, the function, okay. And to use that function, we can say person.functionName. So how old am I. But we actually have to call it. So to call a function, you would use an opening and a closing bracket like that. So now if I run that, we should get this console.log. Or actually, we won't, we get this reference error age. So if you need to refer to any of the values within the object, then we have to use the

Arrays of Objects6:10

Or actually, we won't, we get this reference error age. So if you need to refer to any of the values within the object, then we have to use the this keyword. And now that should work, hopefully. There we go. And one more example here, how about we make a groupOfPeople using an array, but instead of strings, we'll use an array of objects, and each object will be a person. So say const groupOfPeople. So this is an array. So we use the square bracket syntax.

So this is an array. So we use the square bracket syntax. And for each item of the array, it's going to be an object. So we'll use the curly brace syntax for an object literal. And this will have a name key value pair, say Andre, for the first person. And it's a age, say 20. And we can have multiple people in here. So we can just duplicate this a few times. So the second person will be Bob, let's say he's 22. And third person will be Sarah, say she's 30.

So the second person will be Bob, let's say he's 22. And the third person will be Sarah, say she's 30. And now we have this groupOfPeople array, but each item is a person object. So we can console.log groupOfPeople. And that should be fine. And you'll often work with arrays that have objects as items, especially when you're grabbing some sort of information from a third party API. So that's the basics of objects. Again, think of them as a collection of properties that make up an object. And there's definitely more to objects like prototypal inheritance and object-oriented.

Again, think of them as a collection of properties that make up an object. And there's definitely more to objects like prototypal inheritance and object oriented programming. But for now, defining objects as object literals should be fine.

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟