Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

JavaScript Objects

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Store Objects in Arrays

3:45 with Guil Hernandez

Arrays let you group values to build complex data structures. With an array, you store a collection of elements you can access by their position (or index). Objects take that concept further by providing a way to structure related data that's easy to read and retrieve using key/value pairs. It's common to combine the two by creating an array of objects.

Resources

Array of objects code snippet:

const questions = [
  { question: 'How many planets are in the Solar System?', answer: '8' },
  { question: 'How many continents are there?', answer: '7' },
  { question: 'How many legs does an insect have?', answer: '6' },
  { question: 'What year was JavaScript created?', answer: '1995' }
];

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Arrays are really useful, 0:00
    because they let you group values to build more complex data structures. 0:02
    They're an easy way to store a collection of elements you can 0:05
    access by their position or index. 0:08
    Objects take that concept further by providing a way to structure related 0:11
    data that's easy to read and retrieve using key value pairs. 0:16
    It's common to combine the two by making an array of objects. 0:20
    For example, 0:24
    let's look at a quiz program you worked on in a previous course on JavaScript arrays. 0:25
    Open the file array-of-objects.js, and as usual update the script tag and 0:29
    index.html so that the source attribute points to js/array-of-objects.js. 0:35
    Remember, you created a multidimensional array to store quiz questions. 0:44
    Each element in the outer questions array is another array composed of two elements, 0:49
    the question and the answer. 0:54
    This works, but 0:56
    at first glance it's not immediately clear what these pieces of information mean. 0:57
    Another developer looking at this code might have to spend a little extra time 1:02
    figuring it out. 1:05
    One of the best parts about using objects 1:07
    is that they let you use distinct names to identify individual items. 1:09
    This makes objects more efficient to work with than arrays. 1:14
    So let's convert this array of arrays into an array of objects, 1:17
    that way you can use property names to identify the data. 1:22
    Starting with the first array element, I'll replace the square 1:26
    brackets with curly braces and add a property name and colon before each value. 1:30
    First question, then answer. 1:39
    I'll repeat the same steps for the second element in this array. 1:44
    Then replace these two nested arrays with objects. 2:00
    You can copy these objects from the teacher's notes with this video. 2:04
    I've converted each element from an array to an object. 2:08
    Now let's look at the code inside the for loop, 2:12
    where you access the question and answer. 2:14
    You had to use two sets of square brackets to access an element 2:17
    inside a nested array. 2:21
    You can simplify this code and make it more readable by removing this second 2:22
    index notation and adding a property name like this. 2:27
    I'll do the same for the answer. 2:32
    Even though the two dimensional array got the job done, developers typically 2:38
    use this approach when using related data that can be defined by a set of 2:43
    characteristics or properties, for example a quiz question and its answer. 2:47
    This code is easier to understand too, for 2:53
    instance here we're looping through the array. 2:55
    Each time through the loop we access one of the array elements, 2:59
    an object, then we assign the value of its question property to a variable. 3:03
    And we do the same with the answer property. 3:08
    As you can see, the program still works as expected. 3:12
    Finally, even though I've typed my objects over multiple lines, 3:19
    you don't have to do it that way. 3:23
    When your objects don't have a lot of data in them, 3:25
    it might be more readable to put each object on a single line. 3:27
    Here's an example of that. 3:32
    Both work just fine, it's up to you to write the code that's easier for 3:33
    you to read. 3:37

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up