leonids-toys

This is the second book made by NSS for their students. Concepts covered throughout this book will help students acquire newfound knowledge or review essential material needed to code an application in the Javascript language. Data types, data structures, objects, arrays, iteration, functions, properties, conditional statements, and more are covered in Book 2.

Book 2 - Leonid's Bespoke Toy Shoppe In this book, you will gain the knowlege and understanding of working with data in the JavaScript language. You will apply that knowledge in two small projects and then take a self-assessment to gauge how much you have learned.

Data Types for Leonid's Toys Leonid Androvsky is a second-generation Lithuanian who took over the hand-made toy shoppe that his father, Antonin, started and managed for 42 years. What was once known as Antonin's Toy World got renamed by Leonid to Leonid's Bespoke Toy Shoppe to attract more modern parents.

Leonid has hired you to write some code that will help him keep track of his toy inventory. He knows nothing about code or software, so you need to learn the basics so that he can start to automate his business practices.

Learning Objectives You should be able to remember the basic data types you will be working with in JavaScript. You should be able to describe the data type of different properties of real-world things that you represent in code. Describing Toys as Data As a software developer, you will always be thinking about data - the type of your data, the structure of your data, the format of your data, and how to display your data to humans in a Web browser. In the beginning of the course, here are the basic data types you will be working with.

Strings You will use strings to represent words to be stored in your applications. A string is surrounded by double-quotes.

const firstName = "Emily" const lastName = "Lemmon" Numbers If you store a person's age, or a measurement, or a count of something, you will store it as a number. There are two types of numbers.

Integers These are whole numbers: 1, 3, 45, 1024

const applesInTheBasket = 16 Floats Any fraction represented in decimal format: 1.333, 2.414, 3.14159, 86.75, 309.1

const pi = 3.14159 Booleans The logical values of true and false. You will use these values as you might expect in your applications. For example, if you want to track if a user account is currently active or not, you can use true if the account is active, or false if it is inactive.

const accountIsActive = true Practice: Toy Data Types Think about what kind of data that Leonid would need to store about his toys. For example, the name of the toy. What data type would that be?

Write down some other properties of toys that he would need to keep track of, and the data type for each. When you're done, talk with your teammates, or talk to a member of your instruction team to review your ideas.

Data Structures Data structures are also types in a software language, and therefore can be referred to as structural types, that are more complex than their more primitive cousins that you learned about in the previous chapter. There are two common data structures that you will be using in the course.

Learning Objectives You should be able to remember the two data structures you will be working with in JavaScipt. You should be able to explain the purpose of each data structure. You should be able to understand that each individual resource in a data system requires a unique identifier. You should be able to identify which property on an object is the unique idenifier. Arrays Arrays are used to store a list, or collection, of things. Just like when you go to the grocery store and you write down a list of things you need to buy. You could represent your list of grocery items in an array.

Insted of curly braces, an array of items is surrounded by square brackets [].

const groceryList = [ "Milk", "Tomato Sauce", "Bananas", "Taco Shells", "Jalapeno", "Sour cream"] Object An object is a collection of values that have keys assigned to them. Much the way you define variables to store values...

const age = 31 A key is used on an object to refer to values about the object. For example, you want to store all of the properties of a patient visiting a doctor's office. You would create an object to store all of those properties in a single data structure instead of in separate variables.

const megan = { id: 1, age: 31, firstName: "Megan", lastName: "Debity" }

const jack = { id: 2, age: 28, firstName: "Jack", lastName: "Parsons" } You could also be selling phones and want to represent each phone as an object.

const iPhone = { id: 1, name: "iPhone", maker: "Apple", operatingSystem: "iOS", price: 900, weight: 1.2 }

const galaxy = { id: 2, name: "Galaxy", maker: "Samsung", operatingSystem: "Android", price: 600, weight: 1.4 } All of the keys and values are contained within the opening and closing curly braces {}. Each key/value pair is separated by a comma (except after the last one).

Unique Identifier You may be wondering why all of the objects above have that weird id property on them. The reason is that nearly all data storage systems that you will use as a professional will have the requirement that every single time you create a new thing to be stored, it must have a unique, integer identifier.

Therefore, the first thing you create will have an id value of 1. The second thing you create will have an id value of 2. The unique identifier continues to get incremented by one every time you create something.

Because of this, you are going to add an id property to every single object you create from now one.

Eventually, you won't even need to do it. It will be handled for you. You just need to get used to the fact that everything will have that property.

Toy Objects In this chapter, you will be using the object data structure that you learned about in Chapter 2 to represent some toys in code.

Learning Objectives You should be able to demonstrate that you can create objects with the correct syntax. You should be able to explain that variables are labels that refer to values, not the value itself. Setup Run these commands to have a file in which you can write your code.

mkdir ~/workspace/toy-objects cd ~/workspace/toy-objects touch leonids-toys.js Then open that directory in Visual Studio Code with the following command.

code . And open the leonids-toys.js file and follow the directions.

Directions In the last chapter, you wrote down all of the properties of a toy that Leonid would need to track for his shoppe. Now you need to create some JavaScript objects to represent a couple of toys.

Define three toys of your choosing. Assign each one to a different variable name. Make your key names as descriptive as possible. Do not abbreviate or use shortcuts. For example, if you chose manufacturer as a property of a toy, do not shorten it to mfr.

For reference, here's the phone objects that were examples in the last chapter.

const iPhone = { id: 1, name: "iPhone", maker: "Apple", operatingSystem: "iOS", price: 900, weight: 1.2 }

const galaxy = { id: 2, name: "Galaxy", maker: "Samsung", operatingSystem: "Android", price: 600, weight: 1.4 } When you have defined three toy objects, review with a teammate or a member of your instructional team. When describing your object, also be as descriptive as possible and mention the data types.

"The iPhone object has a string maker property, a string operating system property, an integer price property, and a float weight property."

Toy Collection In this chapter, you will build an array filled with objects. Each item in the array will be one of your toys.

Learning Objectives You should be able to define an array that contains multiple objects. You should be able to explain that objects defined directly in an array do not need to be assigned to variables. You should be able to demonstrate that you can create an array of objects using the correct syntax. Objects in Arrays In the previous chapters, you created multiple objects and assigned each one to its own variable to be used later.

const iPhone = { maker: "Apple", operatingSystem: "iOS", price: 900, weight: 1.2 }

const galaxy = { maker: "Samsung", operatingSystem: "Android", price: 600, weight: 1.4 } Now you are going to put both of those objects into an array, rather than being discrete variables. Here's how you would put those phone objects into an array as one, large data structure.

const phones = [ { id: 1, name: "iPhone", maker: "Apple", operatingSystem: "iOS", price: 900, weight: 1.2 }, { id: 2, name: "Galaxy", maker: "Samsung", operatingSystem: "Android", price: 600, weight: 1.4 } ] Notice that the individual variables for each phone are gone. Now the entire array of phones is assigned to a single variable named, shockingly, phones. Naming the variable whose value is an array should always be plural. If you have an array of farm animals, call the variable animals, or even more descriptively, farmAnimals.

You get the point.

One thing you might do as a beginner is forget to put a comma between the two arrays. Look at the array above again and notice that there is a comma after the first closing curly brace, and before the second opening one.

[ {

},  <-- Don't forget this comma
{

},  <-- Or this one
{

}   <-- Don't need one at the end

] Practice: Array of Toy Objects Open your leonids-toys.js file again in Visual Studio Code, and re-write it so that the toy objects you created are all contained within a single array. Make sure you assign the array to a variable named toys.

After you rewrite the code, put console.log(toys) at the end of the code.

const toys = [ // Add your objects here ]

console.log(toys) To see if you got the syntax correct, open your terminal and navigate to the directory where your code file is located.

cd ~/workspace/toy-objects Then run the following command to see the fruits of your labor.

node leonids-toys.js If your syntax is correct, you should see your array of objects immediately displayed in the terminal.

If you syntax is incorrect, you will see a lot of gibberish that won't make much, if any, sense. If this happens, check your syntax again, but if you can't make it work, talk to a teammate or an instructor.

Note Collection In this chapter, you will build an array filled with objects that represent notes about your daily learning.

Setup These commands will create a directory for this project, and a JavaScript file in which you can write your code. Lastly, it will open up the directory is Visual Studio Code.

cd ~/workspace mkdir daily-notes cd daily-notes touch notes.js

code . Objects in Arrays Just like with your phones and toys from the previous project, start with a variable whose value is an array. Define 2 objects in that array. Each object should have the following properties on it.

id (Unique identifier, or primary key) subject (What you learned about) date (The date you learned it) feeling (How you felt when learning it) timeSpent (Roughly how long you learned about it, minutes) Vocabulary check: What is the data type of each property? Which ones should be a string type, and which should be an integer?

Here's some starter code. You add the rest of the properties to each object. You decide what the values of each property should be. Think back on the last few days of what you have worked on at NSS.

~/workspace/daily-notes/notes.js const notes = [ { id: 1, }, { } ] When you are done, use console.log() to display the data structure to the terminal. Then run the following command in the terminal to see if it works correctly and displays the array, or if you have a syntax error. If you do have an error, make sure you have all the commas that you need after your properties.

node notes.js Did you remember to add an id property to the second object?

Display Toy Properties Learning Objectives You should be able to demonstrate how to display a properties's value on an object. You should be able to explain the purpose of a for..of loop in JavaScript. You should be able to identify the variable that represents the array in a for..of loop. You should be able to identify the variable that represents each individual item in a for..of loop. Accessing Properties To access a property of an object, you use a dot (.). You start with the variable name whose value is the object, type a dot, then type the name of the property you want to see. Let's use our phones as an example again.

const iPhone = { maker: "Apple", operatingSystem: "iOS", price: 900, weight: 1.2 } If you want to see just the price of the iPhone, and nothing else, here's how you would display it with console.log().

const iPhone = { name: "iPhone", maker: "Apple", operatingSystem: "iOS", price: 900, weight: 1.2 }

console.log(iPhone.price) There's the pattern. iPhone is the variable whose value is the entire object, followed by a dot, then the name of the property to display.

Display All Prices with Iteration You want to see the price of all phones that are stored in an array, like the one from the previous chapter.

const phones = [ { id: 1, name: "iPhone", maker: "Apple, Inc.", operatingSystem: "iOS", price: 900, weight: 1.2 }, { id: 2, name: "Galaxy", maker: "Samsung", operatingSystem: "Android", price: 600, weight: 1.4 } ] Since those objects in the array aren't assigned to their own variables, then you have to iterate the array with a for..of loop. Here's how you do it.

for (const phone of phones) { console.log(phone) } What will be displayed in the console? The entire array? No, it won't. This for loop iterates the array, which is a fancy word for "access the first item in the array, then the next, then the next until there are no more items to access".

In this loop, the individual objects will now be stored in the variable phone. Each time. Here you see the power of variables. That's the definition of variable. Something whose value varies.

In this case, the value of the phone value varies as the for loop moves through the array one item at a time.

Notice that there are no square brackets [] around the output. Each object is displayed, one at a time.

Now you can use the dot notation to just display the prices instead of the entire object.

for (const phone of phones) { console.log(phone.price) }

You can even be fancy and use string interpolation to put a dollar sign in front of the prices when they are output.

for (const phone of phones) { console.log(Price is $${phone.price}) }

Practice: Display Property of All Toys You get to pick one of the properties that you would like to display for all three of your toys in your array. Write a for..of loop that will iterate your array and use console.log() to display that property of each toy.

For example, if you have a name property on each toy, try accessing that property with dot notation inside the for..of loop and you should see output like this.

Adding New Objects to Arrays In this chapter you will learn about the push() method that is available on every array which allows you to add things to the array.

Add a New Phone Ok, so far, your phone business is pretty limited. You're only selling the iPhone and the Samsung Galaxy. You want to add the Google Pixel to your catalog. The first step is to define the new phone.

Make sure that each object you create has an id property value that is 1 greater than the last one.

// Existing phone catalog const phones = [ { id: 1, name: "iPhone", maker: "Apple, Inc.", operatingSystem: "iOS", price: 900, weight: 1.2 }, { id: 2, name: "Galaxy", maker: "Samsung", operatingSystem: "Android", price: 600, weight: 1.4 } ]

// Define a new phone const pixel = { id: 3, name: "Pixel", maker: "Google", operatingSystem: "Android", price: 750, weight: 1.3 } Now that you have a new phone object assgined as the value of the pixel variable, you can add that new object to the end of your array with push().

phones.push(pixel) Now, when your for..of loop runs, you will see three prices listed instead of two.

Practice: New Toys Your turn now.

Create 2 new toy objects after the initial array is created. Give each one a unique id property value. Use the push() array method twice to add each object to the initial array. Run your code with node leonids-toys.js in the terminal. You should now see two new values being displayed in the terminal.

Adding a New Note In this chapter you will practice using the push() method that is available on every array to add things a new notes to your array.

After your initial array definition, create a new note about today. Give it the same properties as the other two notes.

Don't forget the id property.

const noteAboutToday = {

} Now that you have a new note object, add that new object to the end of your notes array with the push() method. Make sure you write this code before the console.log() so that all of your notes will be displayed in the terminal.

Displaying the Toy Catalog String Interpolation A quick reminder about string interpolation if you saw it in the pre-work. Otherwise, this is an introduction to string interpolation.

String interpolation is available in most high level languages like JavaScript, Python and C#. It allows you to easily build a long string with the value of variables injected into specific locations.

Here's a simple example first.

const age = 27 const name = "Melissa Bell"

const interpolatedString = ${name} is ${age} years old console.log(interpolatedString) Note that the string is built with the backtick character. That's not a single quote at the beginning and end of the string. You can find the backtick character above the TAB key on your keyboard.

Then you use ${} to place the value of any variable into the string.

The above code would output the following string.

Melissa Bell is 27 years old Phone Catalog String Say you want to display the string "The Apple, Inc. iPhone costs 900 dollars."

All of that data is currently contained in the object representation you have been using in the previous chapters.

{ id: 1, name: "iPhone", maker: "Apple, Inc.", operatingSystem: "iOS", price: 900, weight: 1.2 } Here's how you could display that sentence for every phone in the array.

for (const phone of phones) { console.log(The ${phone.maker} ${phone.name} costs ${phone.price} dollars.) } Iterate Leonid's Toy Catalog Your job is to display a simple catalog for Leonid's toys. Use string interpolation, dot notation to access object properties and your for..of loop to display it.

At this point, we're going to assume that you have properties like name, price, and color. Using those as an example, when you run node leonids-toys.js in the terminal, you could display this.

You may have different properties, so use whatever properties you have to build a sample string to be used in the bare bones, terminal-based catalog.

Displaying Your Note Journal Your job is to display a list of your learning notes in the terminal. Remember to use string interpolation, dot notation to access object properties, and your for..of loop.

Display each note to look like the output below. The number on the first line is the primary key (the id property).

Note 1 2/14/2021 I learned JavaScript Objects. I spent 124 minutes working on it I felt frustrated. To have a string output on multiple lines, just press enter when you want a line break. Here's an example.

const chickens = [ { id: 1, name: "Little", fame: "Falling sky" }, { id: 2, name: "Foghorn", fame: "Stupidity" } ]

for (const bird of chickens) { console.log(`Chicken ${bird.id} Name is ${bird.name} Famous for ${bird.fame}

`) } The above code would output the following text to the terminal.

Chicken 1 Name is Little Famous for Falling Sky

Chicken 2 Name is Foghorn Famous for Stupidity

Grocery Run You open your refrigerator on Saturday morning and are immediately forlorn when you stare at the largely empty shelves. You need to make a run to the supermarket.

Setup cd ~/workspace mkdir shopping-list cd shopping-list touch shopping.js

code . High Priority Items Open shopping.js and declare a variable whose value will be an array filled with objects. Each object will represent an item that you first think of when you go to the store.

Common items are:

Milk Eggs Pizza rolls A protein Your favorite fruit Sandwich buns Condiments You can create as many objects as you like. Make sure each one has a primary key and a price property. The rest of the properties are completely up to you.

Once you have an array of grocery item objects, use console.log() to output the contents of the array to the terminal. Run your code and make sure no errors are displayed.

Performing Logic in Loops In the last chapter, you used string interpolation to output a more human-readable string based on the less human-readable JavaScript object properties. You used a for..of loop to step through an array and perform the same operation on every item in the array.

In this chapter, you will do one more operation before you output the string representation of your toys.

Times are tough for Leonid. He's finding that the market for bespoke, artisinal, locally sourced, hand crafted toys doesn't have quite the broad appeal that he thought. He has some loyal customers, but he does have the number of sales each month that he feels he needs to become more profitable.

To account for lower number of sales, he decides to increase the price of all of his toys across the board. After a few months of increased revenue, he believes he will have the cash needed to buy from other distributors and expand his offerings to appeal to a broader audience.

He thinks that having vegan-friendly toys with zero carbon footprint will be the extra appeal needed to start moving more products.

Heavier Phones Your phone store just got notified by all of the major manufacturers that a new battery technology was just implemented in all of their phones. The battery will last 3x longer, but it has the side-effect of adding 0.4 grams of weight to every phone.

Rather than going and modifying every phone in your inventory (yeah, I know you only have 3 phones right now, but let's just imagine that you have 529), you decide to just display the increased weight when you print the catalog.

Since your output is done in a loop, and logic done in a loops is run for every item in the loop, you can write the following code.

// Step through the array of phones for (const phone of phones) { // Add 0.4 grams to the weight of each phone phone.weight = phone.weight + 0.4

// Add the weight to the output
console.log(`The ${phone.maker} ${phone.name} costs ${phone.price} dollars. It weighs ${phone.weight} grams.`)

}

Yep. We see it, too. There's tons of extra numbers in the decimal places for some of those numbers. Don't worry. You didn't do anything wrong. Your computer isn't broken.

It's just an issue with how floats work with JavaScript. You can dig into that later in your career. Just ignore it for now.

Practice: Increasing Leonid's Prices Using the strategy above, modify the current for..of loop that displays the toy catalog and increase the price of each toy before it is printed for the terminal-based catalog.

He wants the price of every toy to be inceased by 5%.

For example, here is the current example output for the catalog.

Here's the output if every toy's price is increased by 5%.

Finding an Item in an Array Now that you have a basic catalog that Leonid can see in the terminal, he has a request. He wants to be able to find a single product by providing the unique id property. Your code should then display the details of the phone which has the specified id value.

If Inside For Loop Your phone shop is getting popular these days. You have expanded your offerings and now you need the ability to have customers use a terminal in your store to find the information about a particular phone.

They come into your store after looking at your catalog, and should be able to enter in the unique id of a phone and then be shown all the details.

You are going to simulate this by specifying the id that you want to find at the very top of your code.

const phoneToFind = 2 Next, you need to modify the for..of loop to only display the product details if a condition is true. In your code, that condition is if the current phone's id value matches the value of the phoneToFind variable's value.

for (const phone of phones) { // Only one phone will cause the condition below to evaluate to true if (phone.id === phoneToFind) { phone.weight = phone.weight + 0.4 console.log(The ${phone.maker} ${phone.name} costs ${phone.price} dollars. It weighs ${phone.weight} grams.) } } With that condition in place, only one phone will be displayed instead of all phones.

This is a very basic implementation of tools that you use on the Web when you search for, or filter, products on a company's product page.

Finding a Note In this chapter, you need to define a variable named searchTerm. Its value can be the value of any property value you like from your notes. For example, if one of your notes has a feeling property whose value is "Compunctious", your variable declaration would be the code below.

const searchTerm = "Compunctious" Use that search term in your for..of loop to output only the object that has the value for the corresponding property.

Here is boilerplate code. You need to enter in the proper condition for the if code block. Refer back to the code you wrote for Leonid's toys since you won't remember this code yet.

It takes a long time to do it from memory.

for (const note of notes) { if () {

}

Now That I Think About It... After you wrote the initial, high-priority list of items you need to buy at the supermarket, you realize that there are lower-priority ones, and then there downright "wants".

You realize that the list might get very long, and you don't want to keep track of the primary key for each object that gets added to your shopping list.

Write a function named addToShoppingList that will add a new grocery item to your array. The function should add an id property to the grocery object that you provide as an argument when the function is invoked.

Also add a dateCreated property to the object whose value will be the current date and time.

Use your function to add 5 new items to your shopping list with a variety of prices ranging from $4 to $16.

Inventory Purchase Function Time to revisit the unique identifier that you have been adding to every object. It's the id property on the object. It was mentioned in a previous chapter that you will eventually learn how to use database systems that will handle adding the id property to your data, and automatically increment the value by 1 each time a new resource is created.

In this chapter you are going to write a JavaScript function that will do that task for you for every toy that gets added to Leonid's catalog.

Phone You are going to start with writing a function that adds a new phone to your phone store's inventory. In the example code so far, the phone properties include a primary key - which is the id property. Time to write a function that will add that property for you when you want to add a new phone to the array.

First, here's an array of phones you can use for reference.

const phones = [ { id: 1, name: "iPhone", maker: "Apple", operatingSystem: "iOS", price: 900, weight: 1.2 }, { id: 2, name: "Galaxy", maker: "Samsung", operatingSystem: "Android", price: 600, weight: 1.4 } ] Next, you can define an object to represent a new phone for your inventory. This time, don't add an id property intially. The function you will write will perform that task.

const pixel = { name: "Pixel", maker: "Google", operatingSystem: "Android", price: 399, weight: 1.2 } Now write a function to add a phone to the array, with an id property added to it. The final code block is at the bottom of the chapter, and includes comments in the code to explain every step.

const addPhoneToInventory = (phoneObject) => { const lastIndex = phones.length - 1 const currentLastPhone = phones[lastIndex] const maxId = currentLastPhone.id const idForNewPhone = maxId + 1

phoneObject.id = idForNewPhone
phones.push(phoneObject)

}

/* Now that the function is defined, you can invoke it and put a value in the parenthesis (a.k.a. the argument). The object will be stored in the phoneObject parameter for use in the function. */ addPhoneToInventory(pixel)

// Display all the phones for (const phone of phones) { console.log(The ${phone.maker} ${phone.name} costs ${phone.price} dollars. It weighs ${phone.weight} grams.) }

You can even display the raw data just to prove that the id property was added to the phone object.

addPhoneToInventory(pixel)

// Display all the phones for (const phone of phones) { console.log(The ${phone.maker} ${phone.name} costs ${phone.price} dollars. It weighs ${phone.weight} grams.) }

// Now show the raw data console.log(phones)

Practice: Adding Toys with Functions Add a similar function to your code for Leonid's application. The code will be nearly identical. You will be using different variable names - because proper variable naming is what professional developers always do - but the logic will be the same.

Final Example Code const phones = [ { id: 1, name: "iPhone", maker: "Apple, Inc.", operatingSystem: "iOS", price: 900, weight: 1.2 }, { id: 2, name: "Galaxy", maker: "Samsung", operatingSystem: "Android", price: 600, weight: 1.4 } ]

const addPhoneToInventory = (phoneObject) => { /* Step 1: Get maximum id current in array */ // Get index of last item in array const lastIndex = phones.length - 1

// Get the last object in the array
const currentLastPhone = phones[lastIndex]

// Get id property value of last phone
const maxId = currentLastPhone.id


/*
    Step 2: Increase the current max id by 1
*/
const idForNewPhone = maxId + 1


/*
    Step 3: Add the id property to the phone object
*/
phoneObject.id = idForNewPhone


/*
    Step 4: Add the phone object to the array
*/
phones.push(phoneObject)

}

const pixel = { name: "Pixel", maker: "Google", operatingSystem: "Android", price: 399, weight: 1.2 }

addPhoneToInventory(pixel)

for (const phone of phones) { console.log(The ${phone.maker} ${phone.name} costs ${phone.price} dollars. It weighs ${phone.weight} grams.) }

console.log(phones)

/* Commented out the "find" code */

// const phoneToFind = 2 // // for (const phone of phones) { // if (phone.id === phoneToFind) { // phone.weight = phone.weight + 0.4 // console.log(The ${phone.maker} ${phone.name} costs ${phone.price} dollars. It weighs ${phone.weight} grams.) // } // }

Writing New Note with no Id Write a function named createNote that will add a new note to the notes array. The function should add an id property to the note object that you provide as an argument when the function is invoked.

const createNote = (note) => { /* Your code for adding id property to note object */

notes.push(note)

}

// Create a new note object const moreNewerNote = {

}

// Specify object as argument for function // | // | // V createNote() Optional Challenge: Date Created One of the properties on your notes is date which provides information about the date you learned a concept. However, you may not actually create the note until the next day - perhaps you got caught in a crowd of maniacal porcupines on the way home, and the trauma prevented you from entering the note.

Whatever the reason, you want to record the exact moment that the note was stored in the array, even if was for a previous date.

In your function, add another property named dateCreated and make its value be the current date and time. The JavaScript Date() object is something to investigate to find out the current date/time.

If you want to try this challenge, and give it a few tries but get stuck, talk to your teammates or instruction team and get some helpful hints.

Filtering Your Grocery List Now that you have a comprehensive grocery list, and are using your glorious function to add new items to it, it may be time to reevaluate some of the more expensive items on your list.

Show Only High Ticket Items Use a for..of loop and an if() condition inside it to only display the items that cost more than $8 (if you don't have any items currently more expensive than that, go change a couple).

Now that you can display the more expensive items on your list, you can do some soul searching and think about if you really need four boxes of coffee cake snacks.

Functions Functions are discrete units of work. They should perform one task, and do it well. Sometimes a function needs some input from you to do its job. Functions are difficult to understand for most beginners. This chapter lets you practice writing and using functions to help your knowledge of the syntax and understanding their behavior.

Setup Create a new directory in your workspace. Add make an HTML page and a JavaScript file.

mkdir ~/workspace/functions cd $_ touch index.html practice.js Add boilerplate HTML and create a <script type="module" src="./practice.js"> before the closing body tag.

Introduction: Age in Dog Years Imagine you want to build an application that lets people see what their age in dog years is. For this application, a calculation needs to be performed. You will take a person's age and divide it by 7. For this unit of work, you would create a function.

You would name the function for exactly what its purpose is.

const calculateAgeInDogYears = () => {

} That's the syntax and structure for most simple functions.

Now, the next question you ask yourself is: In order for this function to do its job, does it require any input? Can it perform its unit of work without any external data?

In this case, the answer is no. It needs to know what the age of the person is. That's input. If a function needs input, then you define a parameter. A parameter is a fancy name for a variable that will hold the value of the input.

It's just a variable.

You should name the variable to reflect what value it is referencing. In this case, it's the person's age.

const calculateAgeInDogYears = (ageOfPerson) => {

} The next thing is to write the instructions for its unit of work. For this function, you will divide the age of the person by 7. You need another variable to reference - or store - the calculated value.

const calculateAgeInDogYears = (ageOfPerson) => { const ageInDogYears = ageOfPerson / 7 } At this point, all you have done is write some instructions. Those instructions haven't been followed yet. Defining a function does not run the instructions.

To run the instructions, you need to type the name of the function somewhere else in your code.

const calculateAgeInDogYears = (ageOfPerson) => { const ageInDogYears = ageOfPerson / 7 }

calculateAgeInDogYears() Make sure your code is the same as above and run your code in the browser. Make sure you have your developer console open.

You'll see nothing, because you don't have any console.log() instructions. You want to see the result of the unit of work. So what should we log? First, log the variable that holds the result of the calculation.

const calculateAgeInDogYears = (ageOfPerson) => { const ageInDogYears = ageOfPerson / 7 console.log(ageInDogYears) }

calculateAgeInDogYears() When you run that code, you will see NaN (meaning "not a number") in the console. Why? Well, it is because you did not provide a value for the ageOfPerson parameter that you defined for the function. Again, a parameter's purpose is to store the value of any inputs.

You provide input when you invoke the function. More specifically, you put the value in the parenthesis. Calculate the age in dog years for someone who is 56.

const calculateAgeInDogYears = (ageOfPerson) => { const ageInDogYears = ageOfPerson / 7 console.log(ageInDogYears) }

calculateAgeInDogYears(56) Refresh the browser, and now will see the number 8 in the developer console.

Now, to see the importance of function parameters, delete the parameter you defined.

const calculateAgeInDogYears = () => { const ageInDogYears = ageOfPerson / 7 console.log(ageInDogYears) }

calculateAgeInDogYears(56) Refresh the browser and now you will see an error, or "exception" as developers call them, in the console.

Uncaught ReferenceError: ageOfPerson is not defined at calculateAgeInDogYears (main.js:2) at main.js:6 Without the parameter defined, you can't use the value of 56 in the function. Now put the parameter back in place.

The next step is to make sure the function is pure. A pure function means that a function does its job and returns a value. Right now, your function performs the calculation and logs the result. This is not pure. To make it pure, you will use the keyword of return.