1 00:00:00,430 --> 00:00:02,210 Arrays are really useful, 2 00:00:02,210 --> 00:00:05,890 because they let you group values to build more complex data structures. 3 00:00:05,890 --> 00:00:08,730 They're an easy way to store a collection of elements you can 4 00:00:08,730 --> 00:00:11,460 access by their position or index. 5 00:00:11,460 --> 00:00:16,340 Objects take that concept further by providing a way to structure related 6 00:00:16,340 --> 00:00:20,444 data that's easy to read and retrieve using key value pairs. 7 00:00:20,444 --> 00:00:24,470 It's common to combine the two by making an array of objects. 8 00:00:24,470 --> 00:00:25,370 For example, 9 00:00:25,370 --> 00:00:29,900 let's look at a quiz program you worked on in a previous course on JavaScript arrays. 10 00:00:29,900 --> 00:00:35,893 Open the file array-of-objects.js, and as usual update the script tag and 11 00:00:35,893 --> 00:00:42,363 index.html so that the source attribute points to js/array-of-objects.js. 12 00:00:44,538 --> 00:00:49,580 Remember, you created a multidimensional array to store quiz questions. 13 00:00:49,580 --> 00:00:54,500 Each element in the outer questions array is another array composed of two elements, 14 00:00:54,500 --> 00:00:56,730 the question and the answer. 15 00:00:56,730 --> 00:00:57,730 This works, but 16 00:00:57,730 --> 00:01:02,300 at first glance it's not immediately clear what these pieces of information mean. 17 00:01:02,300 --> 00:01:05,700 Another developer looking at this code might have to spend a little extra time 18 00:01:05,700 --> 00:01:07,190 figuring it out. 19 00:01:07,190 --> 00:01:09,880 One of the best parts about using objects 20 00:01:09,880 --> 00:01:14,630 is that they let you use distinct names to identify individual items. 21 00:01:14,630 --> 00:01:17,990 This makes objects more efficient to work with than arrays. 22 00:01:17,990 --> 00:01:22,287 So let's convert this array of arrays into an array of objects, 23 00:01:22,287 --> 00:01:26,116 that way you can use property names to identify the data. 24 00:01:26,116 --> 00:01:30,134 Starting with the first array element, I'll replace the square 25 00:01:30,134 --> 00:01:35,041 brackets with curly braces and add a property name and colon before each value. 26 00:01:39,669 --> 00:01:44,887 First question, then answer. 27 00:01:44,887 --> 00:01:47,944 I'll repeat the same steps for the second element in this array. 28 00:02:00,969 --> 00:02:04,250 Then replace these two nested arrays with objects. 29 00:02:04,250 --> 00:02:08,080 You can copy these objects from the teacher's notes with this video. 30 00:02:08,080 --> 00:02:12,110 I've converted each element from an array to an object. 31 00:02:12,110 --> 00:02:14,380 Now let's look at the code inside the for loop, 32 00:02:14,380 --> 00:02:17,380 where you access the question and answer. 33 00:02:17,380 --> 00:02:21,180 You had to use two sets of square brackets to access an element 34 00:02:21,180 --> 00:02:22,910 inside a nested array. 35 00:02:22,910 --> 00:02:27,495 You can simplify this code and make it more readable by removing this second 36 00:02:27,495 --> 00:02:30,791 index notation and adding a property name like this. 37 00:02:32,362 --> 00:02:33,891 I'll do the same for the answer. 38 00:02:38,777 --> 00:02:43,595 Even though the two dimensional array got the job done, developers typically 39 00:02:43,595 --> 00:02:47,902 use this approach when using related data that can be defined by a set of 40 00:02:47,902 --> 00:02:53,490 characteristics or properties, for example a quiz question and its answer. 41 00:02:53,490 --> 00:02:55,750 This code is easier to understand too, for 42 00:02:55,750 --> 00:02:59,830 instance here we're looping through the array. 43 00:02:59,830 --> 00:03:03,480 Each time through the loop we access one of the array elements, 44 00:03:03,480 --> 00:03:08,730 an object, then we assign the value of its question property to a variable. 45 00:03:08,730 --> 00:03:10,789 And we do the same with the answer property. 46 00:03:12,833 --> 00:03:15,385 As you can see, the program still works as expected. 47 00:03:19,679 --> 00:03:23,156 Finally, even though I've typed my objects over multiple lines, 48 00:03:23,156 --> 00:03:25,380 you don't have to do it that way. 49 00:03:25,380 --> 00:03:27,950 When your objects don't have a lot of data in them, 50 00:03:27,950 --> 00:03:32,040 it might be more readable to put each object on a single line. 51 00:03:32,040 --> 00:03:33,950 Here's an example of that. 52 00:03:33,950 --> 00:03:37,499 Both work just fine, it's up to you to write the code that's easier for 53 00:03:37,499 --> 00:03:38,157 you to read.