Approaching Problems Many Ways

Learning Goals

  • Develop a deeper understanding of iterator methods
  • Reduce the risk of being too attached to one iterator method OR avoiding an iterator method
  • Compare and contrast iterator methods by using different iterators to achieve the same output

Activity

Set Up

  • In VS Code, open up the approaching problems many ways file in the lessons folder of your Mod2 Sandbox repo.
  • You’ll see the following data and prompt in the file: 
    const ninetiesToys = [
  {
      name: "Tamagotchi",
      releaseYear: 1996,
      price: 15.99
  },
  {
      name: "Furby",
      releaseYear: 1998,
      price: 29.99
  },
  {
      name: "Super Soaker",
      releaseYear: 1989,
      price: 19.99
  },
  {
      name: "Pogs",
      releaseYear: 1991,
      price: 5.99
  },
  {
      name: "Game Boy",
      releaseYear: 1989,
      price: 89.99
  }
];
  • We will be solving the same challenge three times today. Each time, you will be told which iterator method(s) you’re allowed to use.

The Prompt!

Write a function findCheapToys that returns an array of toy names that cost less than $20.

Expected output => [ 'Tamagotchi', 'Super Soaker', 'Pogs' ]

Round 1: forEach

  • Solve the prompt using a forEach. You may not use any other iterator methods.

Round 1 Sample Solution (don’t peek!)

function findCheapToys() {
  let cheapToyNames = [];

  ninetiesToys.forEach(toy => {
    if (toy.price < 20) {
      cheapToyNames.push(toy.name)
    }
  });

  return cheapToyNames;
}

Round 1 Reflection

  • What are some pros and cons of using forEach?
  • Can you think of any prompt/scenario where a forEach would not work?

Round 2: filter and map

  • Solve the prompt using a filter and map. You may not use any other iterator methods.

Round 2 Sample Solution (don’t peek!)

function findCheapToys() {
  let cheapToys = ninetiesToys.filter(toy => toy.price < 20);
  let cheapToyNames = cheapToys.map(toy => toy.name);

  return cheapToyNames;
}

Round 2 Reflection

  • What are some pros and cons of this approach?
  • Why couldn’t we use only a filter or only a map? Why did we need to use both?

Round 3: reduce

  • Solve the prompt using a reduce. You may not use any other iterator methods.

Round 3 Sample Solution (don’t peek!)

function findCheapToys() {
  return ninetiesToys.reduce((cheapToyNames, toy) => {
    if (toy.price < 20) {
      cheapToyNames.push(toy.name);
    }
    return cheapToyNames;
  }, []);
}

Round 3 Reflection

  • What are some pros and cons of using reduce?
  • Can you think of any prompt/scenario where a reduce would not work?
  • Look at your code from the forEach and reduce. How do they compare?
  • Out of all 3 rounds, which approach did you prefer? Why?

Looking Ahead

While you are working on jsFUNk, we recommend taking the time to solve the same problem multiple ways. This will reduce the likelihood that you become too attached or too afraid of an iterator method. It can also help to understand each method better if you are comparing them to each other. Remember that jsFUNk is there to help you learn - finishing the problems as fast as you can is not the goal!

Lesson Search Results

Showing top 10 results