JS: Callback Function Argument Confusion

[Randolph]

Use the filter Method to Extract Data from an Array

This is the description for the arguments accepted by Callback functions. It has been explained multiple times throughout the course but causes more confusion than clarity.

The callback function accepts three arguments. The first argument is the current element being processed. The second is the index of that element and the third is the array upon which the filter method was called.

See below for an example using the filter method on the users array to return a new array containing only the users under the age of 30. For simplicity, the example only uses the first argument of the callback.

(It would be appreciated if the upper paragraph had an example of utilizing the three arguments.)

[kevinSmith]

I hear what you are saying, but I actually think that might be a bad idea. I can’t remember the last time I used that third argument. I did a few times when I was first learning, but that was usually because I was doing something incorrectly. Off the top of my head I can’t even think of a good use case.

I think showing that might encourage bad practices. If anything I would want text that said, “Typically you will only need the first parameter and occasionally the second. You will not normally use the third.”

[jsdisco]

Here is a very contrived example:

const letters = ['a', 'b', 'c', 'd', 'e', 'f'];

const newLetters = letters.map((letter, index, array) => {
    if (index < 3) {
        return letter.toUpperCase();
    } else {
        return array[0];
    }
});

console.log(newLetters); // ['A', 'B', 'C', 'a', 'a', 'a'] 

But as kevinSmith already said, you’ll almost never need the third parameter, sometimes the second, and always the first. I needed the third exactly once with .reduce, but can’t remember the details.

[Randolph]

This confirms my suspicions. Thank you.

[Randolph]

A good visual. This is what I eventually imagined the description was explaining.

[lasjorg]

I agree that showing the usage likely wouldn’t be a good idea, and if nothing else would make the challenge text too long and verbose.

The MDN docs for filter has a few examples of what happens when affecting initial array (modifying, appending and deleting)

Here is one of them with some logs added:

words = ['spray', 'limit', 'exuberant', 'destruction', 'elite', 'present'];

const deleteWords = words.filter((word, index, arr) => {
  console.log(word); // 'spray', 'limit', 'exuberant'
  console.log(arr.pop()); // 'present', 'elite', 'destruction'
  return word.length < 6;
});

console.log(deleteWords); // [ 'spray', 'limit' ]

---

I updated the hint page with some links to the MDN docs (and fixed a typo and cleaned it up a bit).

[a_aramini]

Tangentially related (because simplistic arrow function in the example confused me). My apologies if this reply should be elsewhere…

Perhaps a link to MDN: Arrow function expressions could be placed on the hints pages for:

1. Use the map Method to Extract Data from an Array
   Uses a more “syntactically complex” arrow function in the solution than in the example.

2. Use the filter Method to Extract Data from an Array

   Uses a more “syntactically complex” arrow function in the solution than in the example.

3. Use Arrow Functions to Write Concise Anonymous Functions

   The introduction to the concept of Arrow Functions is short, quick, and kind of glosses over the syntax usage. The example in the challenge lesson is somewhat simplistic.

For whatever reason, that is the only thing that tripped me up in challenges 1 & 2 above. All of the other concepts presented made sense to me.

[a_aramini]

Sorry, out of edits. I should have provided direct links to the hint pages to save you time if you decide to implement my suggestion…

1. Guide - Use the filter Method to Extract Data from an Array

2. Guide - Use the map Method to Extract Data from an Array

3. Guide - Use Arrow Functions to Write Concise Anonymous Functions