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:

deck

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()?