Accessing Object Properties

JavaScript objects let you store multiple pieces of 0:00 information in a single variable. 0:03 In this way objects are similar to arrays. 0:05 However, arrays use a number, an index value to access an array item, and 0:08 objects use a key to access their properties. 0:13 For example, if you had an array named students, 0:17 you'd get to the first item using an index value of zero, like this. 0:20 Let's look at an example object. 0:25 There are actually two different ways to access the value inside an object. 0:27 First, you can access the value of the name property like this. 0:32 Use the same type of square brackets you use with an array, but 0:36 instead of providing a number, you provide the property's name as a string. 0:40 But, there's another easier and 0:46 more common way to access properties of an object, called .notation. 0:48 You don't need square brackets and 0:52 you don't need to put quote marks around the property's name. 0:54 Just add a dot after the object name, followed by the property name. 0:57 You can use either the brackets or dot notation to access the property value. 1:03 Dot notation is more common however. 1:07 You can also set a property's value this way. 1:10 Just use the equal sign. 1:13 The assignment operator just as you do with simple variables. 1:14 For example, to change the name of this person object, 1:18 you just assign it a new value. 1:22 In fact, you can [SOUND] even create new properties on an object this way. 1:26 For example, to add a country property to this object, you'd write this. 1:30 This not only adds a property named country to the object, but 1:35 also gives it a value. 1:38 One way to think of a basic object like this, an object used to 1:41 store properties and values is like a kind of package for variables. 1:44 Think of properties as a collection of variables contained inside the object. 1:48 This helps keep related data grouped in one easily accessed unit. 1:53 This simplifies handling data, for example. 1:57 You can pass an object and 2:01 all of its properties as a single argument to a function. 2:02 This is particularly helpful if you want to return a lot of 2:06 information from a function. 2:09 Remember the return keyword in JavaScript only lets you return one thing, 2:10 but by returning a object full of information, you can 2:16 create a function that returns one thing that's also full of lots of information. 2:20 All right, let's start working with JavaScript objects. 2:24 You can follow along with workspaces if you'd like. 2:28 Click the launch workspace button to open the workspace for this video. 2:30 If you prefer to use your own text editor you can download the project files from 2:34 this page. 2:38 Open the file object.js, it has a single print function, which we created in 2:39 the last section of this course, and the object you created in the last video. 2:44 The object has five properties with different types of values, strings. 2:49 [BLANK_AUDIO] 2:54 Number, boolean, and an array. 2:56 Let's use the object. 3:01 I'll create a new variable named message that combines a string with 3:03 a property from the object. 3:07 The name of the object is person so to access the value of the name property I 3:12 just type person, a period, and name, and then I'll close the paragraph tag. 3:17 Let's print this message to the page using the print function. 3:25 [BLANK_AUDIO] 3:28 I'll save the file and preview the workspace. 3:32 Cool. 3:36 The message prints out to the page, and 3:37 you can see that the object property works just like any other variable. 3:39 I just wanna point out that this string here we created isn't actual HTML. 3:44 It's just a string of characters like any other in JavaScript. 3:50 However, when they're added to the document, the browser converts it to 3:53 HTML and applies any formatting at that other paragraph's on the page receive. 3:57 Let's access another property and add it our string. 4:02 [BLANK_AUDIO] 4:04 We can also change the values of properties. 4:12 Let's change the name property, and update the message variable with the new value. 4:15 [BLANK_AUDIO] 4:22 Let's see how this works. 4:32 I'll save the file, and preview the workspace. 4:34 Here you can see the original property value, and 4:38 here's the new value after we change the name property. 4:42 You can perform math on numeric properties, too. 4:46 [BLANK_AUDIO] 4:48 I'll save and preview. 5:01 You can also access properties of those values. 5:06 For example, the skills property, contains an array. 5:08 You can look at the length property of that array to see how 5:12 many skills the student has. 5:15 [BLANK_AUDIO] 5:17 Remember that person is the object, skills is the property, but 5:23 since the value in skills is another object, an array of string values, 5:28 we can access a property of that object, person.skills.lenghth. 5:33 It's not uncommon to see objects within objects like this. 5:38 Just remember to use a period to connect the different objects and properties. 5:42 You can also access methods of properties. 5:47 For example, to print out a list of the students skills you can 5:50 use the array join method, like this. 5:53 You learned about this method in the last section of this course. 5:57 Here we start with the object person, access the skills property, 6:00 which is an array, then use an array method on that property. 6:04 As you can see, working with object properties isn't all 6:10 that different from working with variables. 6:13 In the next video, 6:16 you'll learn how to loop through all of the properties in an object. 6:17 See you there. 6:20