Create an Array of Objects

7:30 with Dave McFarland

Walk through the solution to the third project in this JS practice session and see how to create a JavaScript array of object literals.

Teacher's Notes
Video Transcript
Downloads

Correction

In the video, the practice file shown says the object must have 4 properties. You only need the 3 properties: name, inventory, and unit_price for each object literal.

Code for completed solution

let products = [
  {
    name: "chair",
    inventory: 5,
    unit_price: 45.99
  },
  {
    name: "table",
    inventory: 10,
    unit_price: 123.75
  },
  {
    name: "sofa",
    inventory: 2,
    unit_price: 399.50
  }
];
function listProducts(prods) {
  let product_names = [];
  for (let i=0; i<prods.length; i+=1) {
   product_names.push(prods[i].name);
  }
  return product_names;
}
console.log(listProducts(products));
function totalValue(prods) {
  let inventory_value = 0;
  for (let i=0; i<prods.length; i+=1) {
    inventory_value += prods[i].inventory * prods[i].unit_price;
  }
  return inventory_value;
}
console.log(totalValue(products));

`let` and `const`

JavaScript used to have only one keyword for creating a variable: var. For example, to create a variable named temperature with a value of 98.9 you could do this: var temperature = 98.9.

Two new keywords were introduced in ES2015 (a newer version of JavaScript): let and const. Most JavaScript programmers now use those two keywords. However, var works and you'll still see it around a lot. To get familiar with these keywords follow these rules:

`const`

Use const (which is short for constant) to store a value that won't change. For example, if you're setting the sales tax rate -- which won't change while your program is running you'd use const. For example: const taxRate = 7.5;

`let`

Use let to store a value that changes while the program runs. For example, if you're keeping track of a changing score, or the number of times a person clicks on a web page, use let: let totalSales = 0;

As with var you can store any type of data in a variable defined with let or const -- numbers, strings, arrays, objects, Boolean values, etc. If you are confused about whether to use let or const the rule of thumb is if you're in doubt, use const.

To learn more, check out the workshop Defining Variables with let and const

In this final practice with basic JavaScript objects, 0:00 I asked you to create an array of objects. 0:02 So let's start by creating an array, let products = [ ]. 0:05 I'm using the newer syntax to create the variable, let instead of var. 0:11 Var works just as well, but check out the teacher's notes if you want to understand 0:18 the difference between the two. 0:21 Remember, use square brackets to create an array, and 0:24 use curly braces to create an object. 0:27 Now I'm gonna add an item to this array. 0:31 Because an object is a value just like a string, number, or boolean, 0:35 you can add object literals to an array to create an array of objects. 0:39 Just add an object inside the square brackets like this. 0:44 Start with curly braces, and then the key name and the value chair. 0:48 Inventory 5, and the unit_price 45.99. 0:53 So we've added one product, a chair. 0:57 There are 5 in stock and it costs 45.99 each. 0:59 To add another item to an array, just type a comma, followed by another value. 1:05 I'll add two more objects here. 1:09 The name will be table, inventory ten and a unit price of 123.75. 1:16 The last product is a sofa. 1:21 There’s two in stock and the unit price is 399.50, okay. 1:25 We have our array in place with three different objects or three products in it. 1:31 Now that we have an array of objects, 1:39 let's create some functions to work with that array. 1:40 First, a function that returns a list of the names of all of the products called 1:42 function listProducts has one parameter, prods. 1:47 That's the array of products that gets passed into this function. 1:54 Because the function returns a list of product names, 1:58 I'll start by creating an empty array to store that list in, 2:03 let product_names = []. 2:09 It's empty now, but we'll add product names as part of this function. 2:14 Next, I need to loop through the array of products, looking at each object and 2:19 retrieving the name of each product. 2:23 There are many ways to loop through an array in JavaScript. 2:25 I'll use a basic for loop. 2:28 Type for let i=0, i less than prods.length, i+=1. 2:32 This creates a counter variable, let i=0 creates a counter variable, 2:36 each time through the loop it compares the value of i 2:44 to the link of the passed in array of objects. 2:50 And exits as soon as that as equal to the number of items in the array. 2:54 In other words, it runs the code inside the loop the same number or 2:58 times there are array items. 3:00 In this example, I've got three objects, so the loop will run three times. 3:03 To access the name property of each object, 3:09 we first need to access that object using array notation. 3:12 So prods, bracket i, 3:16 closed bracket, accesses the array item that's at the i index. 3:19 In other words, the first item in the array. 3:23 In this case, it's the chair object. 3:25 The second product is at index 1. 3:31 And the last product is at index 2. 3:33 As the loop runs, the value of i increases. 3:35 Now to access the name properly, just add the dot syntax and 3:39 the property you want to access, in this case name. 3:44 I'm building an array of product names. 3:48 So I can use the array push method to push the name onto 3:50 the end of the product names array. 3:53 To do that, I'll start by typing product_names.push and 3:55 pass to the push method the name of that product. 4:03 Finally, I'll just return that array. 4:11 Return product_names. 4:16 Let's see if this works, by calling the function and 4:19 logging the result to the console. 4:23 I'll type console.log( ListProducts(products); So 4:27 I'll call up a loose products function and pass the products array to it, all right. 4:32 I'll save this file. 4:38 Open the console. 4:40 And type node 3_final_products.js. 4:41 And there's a list of all our products. 4:52 Excellent. We have one last function to create. 4:53 The total value function will calculate the total value of all the items in our 5:00 inventory. 5:04 It takes as an argument an array of objects. 5:05 So I'll type function totalvalue(prods) {}. 5:08 This is the basic structure of our function. 5:17 We'll calculate the value and return it. 5:20 So I'll create a variable to hold the calculations, and 5:23 then we'll use a loop just like we did in the previous function. 5:26 So I'll take let inventory_value = 0. 5:31 That's the starting value. 5:33 Then I'll do a for (let i=0; i-prods.length; i+=1), and braces. 5:36 Each time through the loop, 5:43 we'll add to the inventory_value variable by multiplying the total number of 5:44 the current product in stock by unit price of that product. 5:49 So, say we have five hats stocked and each hat cost 10. 5:52 The total inventory value of that product is 50. 5:55 So, I'll take the inventory underscore value, 5:59 I'll add to it prods i inventory times prods i unit price. 6:05 We loop through the array making that same calculation for each product and 6:13 adding it to the inventory value variable. 6:17 Finally, we just returned that variable, return inventory_value. 6:19 To finish off this project let's log the results of calling that function. 6:26 I'll type console.log(, and then call totalValue, 6:33 passing products as an argument. 6:38 I'll save the file. 6:41 Open the console. 6:44 Type node 3_final_products.js. 6:48 And there we have it, chair, table, sofa, and the total value is $2,266.45. 6:53 If your project isn't working, 7:01 check your code against the code pasted into the teachers net. 7:02 Pay close attention to the items you may have missed. 7:06 Think about why you might have missed them. 7:08 And if you need to, revisit the videos from the loops arrays, an object's course 7:10 that can help clarify what you're not quite yet understanding about objects. 7:14 Also, if you're stuck, it's often really helpful to reach out to our community and 7:18 post a question to the forum. 7:22 We have lots of students who are eager to help. 7:23 I hope you had fun with this practice session and 7:26 fun working with JavaScript objects. 7:28

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

Practice Object Literals in JavaScript