Exercise Monday

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 `forEach()` and/or `map()`.

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.

Warm Up

• What is the difference between `forEach()` and `map()`. When might you use one over another?

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 `forEach()` loop within another `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 `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?
• Are there any loops that could instead be replaced with `.map()`?