Please expand the explanation for: Use the map Method to Extract Data from an Array

[runningchild]

Tell us what’s happening:

There have been quite a few lessons/challenges, where I struggled with what I perceived as incomplete explanations (from a beginner’s point of view). But the explanation (and even one solution) for this one drove me to create this thread.

Unless I missed some major lessons, functions only ever took arguments from the function calls. Then suddenly this sentence appears in the explanation:

When the callback is used, it is passed 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 map method was called.

Maybe a pro understands what that means, but from my knowledge as a beginner, that sounds as if I have to (or am able to) pass three arguments into the function (from where though?). And then in the solution suddenly there is “item” as an argument and I have to wonder, where that comes from. It isn’t passed into the function. So I wonder if this is a set expression, but that is not explained anywhere either.

Just after lengthy outside research I find out, that for the first time in FCC the arguments just appear out of thin air but I still have to make up names for them. As if any of that would make sense, coming from previous lessons.

So I would strongly suggest giving more detailed explanation of what is happening here, how to use the arguments and the fact that you have to name them, but not pass them into the function. And show it in an example. This type of stuff is in no way clear or obvious to a noob like me. It just makes me really frustrated with the “teacher” (FCC).

So I look at the solutions and finally understand solution 1, but then there is solution 2 and suddenly there is an argument call that is… what? An object? Why? And how? I thought the arguments of a map function automatically are item, index and the array? Does this get overwritten, if I pass in an object? And what happens with this object in this function? NONE OF THIS IS EXPLAINED!!! (And I still don’t get it)

Sorry for “shouting” but this kind of stuff is really frustrating as a learner. Many, many lessons befor this one already had solutions that used map() without ever explaining it. Now we finally get an explanation but it is so confusing and incomplete, that it really stops all learning momentum in its tracks.

So please, please, please consider expanding this lesson.

Thank you!

Challenge: Use the map Method to Extract Data from an Array

Link to the challenge:

freeCodeCamp.org

[kevinSmith]

@runningchild

Maybe a pro understands what that means, but from my knowledge as a beginner, that sounds as if I have to (or am able to) pass three arguments into the function (from where though?).

This happens automatically, without you doing anything. They are a product of the map method.

const arr = ['apple', 'banana', 'orange'];

const newArr1 = arr.map(el => el.toUpperCase());
console.log(newArr1);
// ["APPLE", "BANANA", "ORANGE"]

const newArr2 = arr.map((el, idx) => idx + ' ' + el);
console.log(newArr2);
// ["0 apple", "1 banana", "2 orange"]

Notice in the first example, you don’t use the index parameter. That’s OK, map just passes in three parameters and we can choose to use them or not. There are always three parameters being passed into our callback, being passed by map.

[JeremyLT]

I do not know what you mean by ‘the arguments appear out of thin air’. They most certainly do not.

How to use arguments and the fact that you have to name them is covered here:

freeCodeCamp.org

The ‘new idea’ with high order methods such as map is not that functions have arguments with names. You should have already seen this idea.

The new idea is that functions can be passed to other functions as arguments.

The map method is a built in function defined for all arrays. The map method takes a function as its argument and it returns a new array where every entry of the original array has been transformed (or mapped) to a new value in this new array.

So we write a callback function that the map method will use internally. This callback function can take up to three arguments, the current array value, the index of the current array value, and the array itself. This function is written like any other function you have written thus far.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

const myArr = [1, 2, 3];

function myCallback(currentValue) {
  return currentValue*2;
}

console.log(myArr.map(myCallback));

Now, we often define the callback function with more compact syntax, like you were shown here

freeCodeCamp.org

const myArr = [1, 2, 3];

console.log(myArr.map(currentValue => 2*currentValue));

The second solution listed uses destructuring, introduced here

freeCodeCamp.org

to more compactly represent transforming an array of objects.

[kevinSmith]

I remember that in the beginning, callback functions seemed like magic to me. I probably too wondered how something like map was passing in those parameters and I couldn’t understand where they came from. I didn’t really understand it until I started building my own callback functions. Until then, it’s probably OK to think of it as “magic”. Somehow, magically, map passes in those parameters to your callback function. It passes 3 parameters, but you don’t need to use them all - I often just use the first one or the first two, depending on what I need.

[runningchild]

@kevinSmith

@runningchild

Maybe a pro understands what that means, but from my knowledge as a beginner, that sounds as if I have to (or am able to) pass three arguments into the function (from where though?).

This happens automatically, without you doing anything. They are a product of the map method.

const arr = ['apple', 'banana', 'orange'];

const newArr1 = arr.map(el => el.toUpperCase());
console.log(newArr1);
// ["APPLE", "BANANA", "ORANGE"]

const newArr2 = arr.map((el, idx) => idx + ' ' + el);
console.log(newArr2);
// ["0 apple", "1 banana", "2 orange"]

Notice in the first example, you don’t use the index parameter. That’s OK, map just passes in three parameters and we can choose to use them or not. There are always three parameters being passed into our callback, being passed by map.

Yes and then we have to think of names for them and then use those names. I get that now.

But what you just said and what I just added is not at all clear to someone who has never encountered a situation like this before.

[JeremyLT]

Maybe I’m misunderstanding you, but it seems like you said that it was not clear to you that function arguments have to have names? This is concerning to me because at this point (> 200 challenges into the curriculum) you should have seen that function arguments have names.

[kevinSmith]

Yes and then we have to think of names for them and then use those names. I get that now.

And just to be clear, those names are completely arbitrary. We can call them anything (anything that is a valid JS variable name, anyway).

But what you just said and what I just added is not at all clear to someone who has never encountered a situation like this before.

FCC can’t design a system that is perfect for everyone. Some people come in with some other knowledge and/or naturally understand these things. Some don’t. And everything in between with infinite variations. True, they could explain everything exhaustively, but then the certificates would take 10X as long and a lot of people would get bored, being forced to deeply explore things that are either obvious to them or are irrelevant at this state in their development.

Part of the process is the user reaching out for answers when they need more clarification. This may be an “accident” but it’s actually a great thing - one of the most important skills a developer can learn is how to research with google, stack overflow, the docs, etc.

I know it’s tough, but don’t worry if you don’t understand every concept perfectly - just keep at it and it will come eventually. If you get bogged down worrying about every little detail, you’re doomed to failure.

[runningchild]

@JeremyLT

The ‘new idea’ with high order methods such as map is not that functions have arguments with names. You should have already seen this idea.

The new idea is that functions can be passed to other functions as arguments.

The map method is a built in function defined for all arrays. The map method takes a function as its argument and it returns a new array where every entry of the original array has been transformed (or map ped) to a new value in this new array.

So we write a callback function that the map method will use internally. This callback function can take up to three arguments, the current array value, the index of the current array value, and the array itself. This function is written like any other function you have written thus far.

This was not the part that was casing confusion.

Just a few lessons before we are reminded that functions get their arguments by us calling them in the function declaration and than by us passing the values to the function, when we call it later. I don’t remember an instance in the preceding lessons, where this was different. Now suddenly this system changes fundamentally and it is not at all well explained.

[JeremyLT]

Nothing has fundamentally changed; nothing is different. The callback function still gets values passed in when it is called.

The map method internally calls the provided callback function, and values are passed into the callback function at that time.

There are examples you have seen of us calling a function that calls a function before, such as the recursion problems. This is the same thing. The map method calls the callback function we provide.

[runningchild]

Yes, of course I know that. But when the explanation tells us, that a function inside a map() always can have the three arguments (current value, index and the whole array), then I assume that, since obviously something is happening in the background, I have to name or call these arguments in a certain set way. Like with regular expressions, where there is a set way of for example only filtering white spaces.

But then there is no mention of these naming or calling standards, so my mind goes to: Ah… this function can only TAKE these three arguments, so I must pass them to the function… but how!?

I know, that this is all super obviuous once you understood it. But for someone who has no idea and is relying on FCC to guide them through the process, it is completely out of left field.

[runningchild]

@kevinSmith

FCC can’t design a system that is perfect for everyone. Some people come in with some other knowledge and/or naturally understand these things. Some don’t. And everything in between with infinite variations. True, they could explain everything exhaustively, but then the certificates would take 10X as long and a lot of people would get bored, being forced to deeply explore things that are either obvious to them or are irrelevant at this state in their development.

But they start with the most basic of the basic stuff and then repeat this stuff over and over again in later lessons as well. For example how to pass an argument to a function just a few lessons earlier, even though this was absolutely neccessary knowledge for the last 50 lessons. So it seems to me, that this is designed for beginners. Well, at least until you come to a lesson like this.

[JeremyLT]

The same three pieces of information are passed into the callback function. You get to name them however you like. It perhaps has been unclear to you, but the names used inside of a function have no impact outside of that function, due to scoping. There is no ‘naming standards’ in this sense. The only ‘calling standard’ is that when the callback function is called, the first argument contains the current array value, the second argument contains the index of the current array value, and the third argument contains the entire array.

[runningchild]

@JeremyLT

The map method internally calls the provided callback function, and values are passed into the callback function at that time.

There are examples you have seen of us calling a function that calls a function before, such as the recursion problems. This is the same thing. The map method calls the callback function we provide.

Just these two super short paragraphs contain 95% of the explanation, that is imho missing from the lesson. This is absolutely new stuff, that a function passes arguments automatically and it is just not adressed well.

[JeremyLT]

You perhaps missed

The map method iterates over each item in an array and returns a new array containing the results of calling the callback function on each element. It does this without mutating the original array.

We try to make these explanations shorter so that readers don’t get lost in a sea of words, but the forum is here in case anyone has questions about the content.

[runningchild]

@JeremyLT

The second solution listed uses destructuring, introduced here

freecodecamp.org

freeCodeCamp.org

Learn to Code — For Free

to more compactly represent transforming an array of objects.

I looked at this but I still don’t get, how it is possible, since it seems to me, that map() passes these arguments into the function either way. And when I name any argument, then it will just assume, it should use the arguments handed over from map(). So how does working with the restructuring bit use these arguments passed by map(), if I am not actually naming them? Or are they somehow in there?!?

[runningchild]

@JeremyLT

You perhaps missed

The map method iterates over each item in an array and returns a new array containing the results of calling the callback function on each element . It does this without mutating the original array.

We try to make these explanations shorter so that readers don’t get lost in a sea of words, but the forum is here in case anyone has questions about the content.

I feel like I understand this. But maybe not? Here is my interpretation:
Like in a for-loop the map() function goes through each item in an array or object and then performs the function that we included in the map() on the current item. The results are return in a seperate array or object. Am I correct?

If so: this was not my problem. My problem was the mysterious and previously unexplained argument generation and how to handle its passing to the function.

[JeremyLT]

In this problem, the array elements are objects. You can destructure an object passed as a function argument

This is probably a better link:

freeCodeCamp.org

Destructuring example

const myMovie =   {
    "Title": "Inception",
    "Year": "2010",
    "Rated": "PG-13",
    "Director": "Christopher Nolan",
    "Writer": "Christopher Nolan",
    "imdbRating": "8.8",
    "imdbVotes": "1,446,708",
};
const { Title: thisTitle, imdbRating: rating} = myMovie;
console.log("Title: " + thisTitle);
console.log("Rating: " + rating);

Example destructuring in function arguments:

const myMovie =   {
    "Title": "Inception",
    "Year": "2010",
    "Rated": "PG-13",
    "Director": "Christopher Nolan",
    "Writer": "Christopher Nolan",
    "imdbRating": "8.8",
    "imdbVotes": "1,446,708",
};

function takeThisApart({ Title: thisTitle, imdbRating: rating}) {
  console.log("Title: " + thisTitle);
  console.log("Rating: " + rating);
}

takeThisApart(myMovie);

So the second example uses this destructuring to condense the callback function definition

cost callback = ({ Title: title, imdbRating: rating }) => ({title, rating});

So on the inputs we have destructuring and on the output we’re using an object literal

freeCodeCamp.org

Note that the ()s are need around the object literal for the implicit return
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#advanced_syntax

[JeremyLT]

There is no ‘mysterious argument generation’. The callback function is just a function. As you say,

@runningchild

the map() function goes through each item in an array or object and then performs the function that we included in the map() on the current item

The items of the array are the arguments to the callback function. Every item in the array gets passed to the callback function we provide.

[kevinSmith]

@runningchild

Here is my interpretation:
Like in a for-loop the map() function goes through each item in an array or object and then performs the function that we included in the map() on the current item. The results are return in a seperate array or object. Am I correct?

Yes, basically. But specifically an array.

If so: this was not my problem. My problem was the mysterious and previously unexplained argument generation and how to handle its passing to the function.

It is unexplained because you don’t need to know about it. For now, map is a black box. In reality, it is accepting the callback function as a parameter and internally it is calling the callback with those three parameters. You can’t see it and that’s OK. You don’t understand what is happening inside that black box and that’s OK. I can drive a car just fine even if I don’t know how spark plugs work.

Again, for now, I’d just accept this as “magic”. You could spend time deep diving into it, but you will get distracted from what is important. It would be like taking driving lessons and getting bogged down about how the engine works - it’s good information but it is distracting me from what I am trying to learn at that point in time.

Again, this all seemed like magic to me until I started building by own methods using callbacks. I’m sure if you google “javascript map implementation” you will find some articles and videos talking about this.

[runningchild]

I really tried to work through this with your examples but I just can’t. And like kevinSmith suggested, I will stop at this point. Can you just confirm or deny for me real quick: Solution 2 is NOT using any of the three arguments passed by map()?