Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Modify Object Properties

5:48 with Dave McFarland

Walk through the solution to the second project in this practice session and see how to modify properties on a simple object literal.

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

Code for completed solution

let product = {
  name: "Chair",
  inventory: 10,
  unit_price: 45.99
};
function addInventory(prod, quantity) {
  prod.inventory += quantity;
  console.log(quantity + " " + prod.name + "s added to the inventory.");
  console.log(prod.inventory + " " + prod.name + "s in stock.");
}
addInventory(product, 3);
function processSale(prod, quantity) {
  prod.inventory -= quantity;
  console.log(quantity + " " + prod.name + "s sold");
  return quantity * prod.unit_price;
}
console.log("Total sale: $" + processSale(product, 3));
  • 0:00

    For this project, you had to create an object literal and

  • 0:03

    a couple of functions that manipulate the values in the object.

  • 0:06

    Let's start by creating the object in the 2_product.js file.

  • 0:12

    I'll call this object product and add three properties with three values.

  • 0:19

    Chair, we have 20 of them in stock, and their unit price is $45.99.

  • 0:25

    Now here I'm using the newer syntax with the let keyword to create the variable.

  • 0:31

    You could use var just as well and it still works.

  • 0:34

    But check the teacher's notes if you wanna understand the difference between var and

  • 0:37

    let, and why we now use let.

  • 0:40

    Now, this is just a basic object literal with three properties and three values.

  • 0:44

    Next, I'll create a function that manipulates the value of the inventory

  • 0:48

    property of the product object.

  • 0:52

    I'll call the function addInventory, and it accepts two arguments,

  • 0:57

    the object itself, and the number of items to add to the inventory.

  • 1:02

    So to adjust the inventory just add the quantity to the inventory property.

  • 1:10

    Remember you can use dot syntax to access a property on an object.

  • 1:17

    You can then assign a new value to that property.

  • 1:20

    In this case I'll use the += operator, And

  • 1:24

    add the quantity that's passed into the function.

  • 1:28

    In other words, if we add five new chairs,

  • 1:31

    we'll add five to the inventory property of this object.

  • 1:35

    Now we'll log out a message to the console.

  • 1:42

    We'll print the quantity, and which product we add to that quantity too.

  • 1:53

    I'll save this and call the function down here.

  • 2:01

    I'll pass in our product, and let's say we add three to the inventory.

  • 2:08

    I'll save the file, and in the console down here I'll type,

  • 2:12

    node 2_product.js to run our code.

  • 2:18

    3 Chairs added to the inventory.

  • 2:21

    If you're following along, and your script isn't working, just pause this video and

  • 2:25

    compare your code to the code posted in the teacher's notes.

  • 2:28

    Finally, I'll log out the current inventory after we've changed,

  • 2:32

    that is after we've added items to the inventory.

  • 2:40

    So, we'll log out prod.inventory, which gives you the new number of items in

  • 2:45

    the inventory, as well as the products name, and

  • 2:47

    a little bit of message saying that we have those in stock.

  • 2:52

    Again, I'll save this file, go to the console, And run the code.

  • 3:00

    3 Chairs added to the inventory.

  • 3:02

    23 Chairs in stock.

  • 3:05

    There are many ways you can improve this function.

  • 3:07

    For example, you might want to make sure that the quantity that's passed into

  • 3:10

    the function is a positive whole number.

  • 3:13

    We can't add half an item, nor can we add a string to the inventory.

  • 3:17

    The next function returns a sales amount and deducts products from the inventory.

  • 3:26

    The function's called processSale and

  • 3:29

    takes the product object in a quantity as arguments.

  • 3:37

    In this case,

  • 3:38

    because we're selling an item, we'll be removing it from our inventory.

  • 3:42

    So, we'll use the -= operator.

  • 3:50

    I'll access the inventory amount and

  • 3:52

    subtract from it the quantity that's passed in.

  • 4:05

    Let's log out the quantity sold.

  • 4:11

    To test this, we'll call this function.

  • 4:14

    Pass in our product, object, and let's say we'll sell five chairs.

  • 4:24

    Let's test this in the console.

  • 4:26

    I'll clear the console and call the program again.

  • 4:30

    3 Chairs added to the inventory.

  • 4:31

    23 Chairs in stock.

  • 4:32

    5 Chairs sold.

  • 4:34

    All right, looks good.

  • 4:36

    Finally, let's return the sales total.

  • 4:42

    I'll go back to the processSale() function and add a return statement.

  • 4:49

    Now we're returning the total sales price, which is a quantity,

  • 4:53

    how many chairs were purchased times the price per chair,

  • 4:57

    that's the unit price, and then let's log out the results of this,

  • 5:04

    To the console By calling the function,

  • 5:11

    passing in the product, and let’s say we’ll buy three chairs this time.

  • 5:19

    Let's see what happens.

  • 5:20

    Great!

  • 5:21

    3 Chairs sold.

  • 5:22

    The total sale $137.97.

  • 5:27

    If you had trouble with this practice session don't worry,

  • 5:29

    compare your code to the code the sit in the teachers notes below.

  • 5:33

    Look very carefully at what tripped you up, study it, and

  • 5:36

    figure out how to fix your code.

  • 5:38

    Failure is the best way to learn and

  • 5:40

    we don't usually get things right on the first try.

  • 5:44

    Now are you ready for the final practice challenge?

  • 5:46

    I'll see you in the next video.

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

Sign up