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
• Practice using console logs effectively as part of your workflow
• Take note as scope issues arise

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.

Round 1: forEach

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

Round 2: filter and map

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

Round 3: reduce

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

function findCheapToys() {
  let cheapToyNames = [];

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

  return cheapToyNames;
}

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

  return cheapToyNames;
}

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

Plot Twist

One by one, go back to each round’s solution and refactor it so that the ninetiesToys data set is passed as an argument when you invoke the function. This allows the same function to be used with multiple data sets.

Ensure it still works for your ninetiesToys data. Then, copy/paste the eightiesToys dataset below at the top of your file and invoke the refactored solution with the eightiesToys data passed as the argument. Ensure the function gives the correct result. Consider how this changed the steps of that solution.

const eightiesToys = [
  {
    name: "Rubik's Cube",
    releaseYear: 1980,
    price: 9.99
  },
  {
    name: "Transformers",
    releaseYear: 1984,
    price: 19.99
  },
  {
    name: "My Little Pony",
    releaseYear: 1983,
    price: 12.99
  },
  {
    name: "Cabbage Patch Kids",
    releaseYear: 1982,
    price: 24.99
  },
  {
    name: "Nintendo Entertainment System",
    releaseYear: 1985,
    price: 89.99
  },
  {
    name: "He-Man and the Masters of the Universe",
    releaseYear: 1982,
    price: 14.99
  }
];

function findCheapToys(toys) {
  let cheapToyNames = [];

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

  return cheapToyNames;
}

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

  return cheapToyNames;
}

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

Looking Ahead

While you are working on jsFunk, take 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!