Map() and Filter()

Hey guys, I will be doing my blog on the map and filter array methods because I struggle to grasp and remember what map and filter actually does, and this will help me and other people understand better. I hope you guys enjoy!

*What is the Map Method/ What does it do?
*

Map basically takes items in an array, copies them, and then modifies them. Map also iterates an array, uses callbacks (mainly anonymous functions), and returns the callback. If you forget to return, the new array will contain undefined.

*What is the Filter Method/ What does it do?
*
Filter is kind of like a strainer because it sifts/ filters what we want from an array. The filter() function also searches an array and returns the array. Filter also loops/ iterates through elements in an array.
When using filter, the function callbacks returns a boolean.

*Why/How I Used Filter and Map
*

var friends = [
  {
    name: "Donal",
    age: 18,
    gender: "male"
  },
  {
    name: "Jonathan",
    age: 18,
    gender: "male"
  },
  {
    name: "Sunni",
    age: 19,
    gender: "female"
  }
];

var s = friends
  .filter(friend => friend.age < 18)
  .map(friend => friend.name);

console.log(s);

In this example, the end result is getting the age of a friend if their over 18 and if their gender is female. Like I said earlier, when trying to get objects, you use filter to get the whole object, then we use map to get the specific value, and then return.

*Recreation Map
*

const mentalLoad = [
  { type: "conflict", value: "argument with friend" },
  { type: "stress", value: "upcoming test" },
  { type: "focus", value: "finish homework" },
  { type: "stress", value: "chores pileup" }
];

const focusedItems = mentalLoad.filter(item => item.type === "focus");
const tasksToFocusOn = focusedItems.map(item => item.value);

// Final result:
console.log("Today, I will focus on:", tasksToFocusOn[0]);

*Recreation of Filter
*

Array.prototype.myMap = function(callback) {
  const result = [];

  for (let i = 0; i < this.length; i++) {
    // call the callback on each item and push its return value
    result.push(callback(this[i], i, this));
  }

  return result; // return the new array
};

*Times When Filter Wouldn’t be the Best Fit
*
We would want to avoid using filter when we want to modify the existing array. If we’re/ your’re looking for just one item/ value, filter might be inefficient or going overboard.

*Times When Map Wouldn’t be the Best Fit
*
We wouldn’t use map if we aren’t returning something because map expects us to return something. Not returning something results in undefined.

*Comparison of Traditional Loops to Map and Filter
*
Map and filter are simply more efficient. Traditional loops require you to write out the conditions, needs more code, and is only good for complex logic, unlike map and filter.

*If I were to Relay this to Real-World Problems
*
One would filter out their stress/ conflicts so that they can focus on what matters. The connection with that would be filtering through stress/conflicts, but our end result we want would be focus. The array would contain our stress/ conflicts along with the thing we are trying to focus on, and we would filter out stress and conflicts. We would then get the this we are focusing on and say if we wanted a specific task to focus on, we would map to get that specific value.

Array.prototype.myFilter = function(callback) {
  const result = [];

  for (let i = 0; i < this.length; i++) {
    const currentValue = this[i];

    // If callback returns true, keep the value
    if (callback(currentValue, i, this)) {
      result.push(currentValue);
    }
  }

  return result; // return the filtered array
};