Goal: As you saw, looping and mapping are powerful concepts that can manipulate large amounts of data relatively quickly. Practice each by completing the exercises below using Array.prototype.forEach().

Remember, understanding is the goal here. You're absolutely not expected to complete everything listed on this page. In fact, there is often intentionally more content than can reasonably be completed in a single day. (This allows students an opportunity to later review concepts without having to repeat exercises they've previously done). Focus on understanding the concepts, not on speed.

Code

---

Groceries

• Create a form that allows a user to input items they need at the store.
• When the user submits the form, hide the form and display the list of items in alphabetical order, all uppercased.

Hint: To do this, build an array of the inputted items. (Make sure you don't include any blank fields.) Sort the array in alphabetical order. Make a new array with each entry uppercased (don't just uppercase them when you display them). Then, display the sorted list of things as list items inside a <ul>.

Explore the arrays entry of the Mozilla Developer Network JavaScript documentation to research what method might be used to sort arrays.

Word Play

• Create a form where users may enter a sentence.
• Turn that sentence into an array using the split method.
• Then, loop through this array to build a new array out of every word in the sentence that is 3 or more characters in length.
• Finally, reverse the order of the new array, join it back together into a string, and display it to the user.

Build a Deck

• Use a Array.prototype.forEach() loop within another Array.prototype.forEach() loop to build an array representing a deck of cards. A deck consists of 52 cards - 13 ranks in each of 4 suits.
• Then, display a list of every card in the deck. (Hint: Each element of the array should read something like "ace of spades" or "4 of hearts").

The start of your output should look something like this:

Further Exploration

Filter, Reduce

Look into the Array filter and reduce methods. Refactor some of the projects above to make use of these methods.

Word Order

Create a website that lets users input a block of text and returns a list of all the unique words and how many times they appeared.

For example, if the user inputs "hello world world", the page should show:

• hello 1
• world 2

If you finish, and feel comfortable with Array.prototype.forEach() loops, try to complete the above exercise but instead order the list by the number of appearances - greatest to least. For words that appear the same amount of times, order by which word appeared first.

Hint (and sneak peek at next week): Try creating and playing with an object hash and its contents in the JavaScript console:

> words = {programming: 2, fun: 5};
Object {programming: 2, fun: 5}
> Object.keys(words);
["programming", "fun"]
>words.programming
2
>words.fun
5
>words.nothing
undefined
words.fun>words.programming
true

Peer Code Review

---

• Is the JavaScript business logic separate from the user interface logic?
• Are variable names descriptive and easy to understand?
• Is code properly indented throughout?
• Are loops being used correctly? What about mapping?