Good morning, I had a question regarding this following example code below. Specifically, is it significant that you used the term number and not numbers in the numbers.map() method’s callback function?
const bigNumbers = numbers.map(number => {
return number * 10;
});
Thank you.
number is the parameter, map will pass each value from the numbers array to the parameter. Thus number is a very good name.
you could even name the parameter bar:
const bigNumbers = numbers.map(bar => {
return bar * 10;
});
bar is not very descriptive, its just to demonstrate what is what.
So in the example they start out by manipulating the array called “numbers,” but then after the arrow function the variable manipulated is just called ‘number’. What am I missing? Does Javascript recognize plurals?
no.
number is a parameter. The map method calls the function for each element in the array and passes the current value to the parameter.
Hi there,
Hoping you can help. I am still struggling with why this, for example, works:
const groceries = [“item1”, “item2”, “item3”]
function printGrocery(element){
console.log(element);
}groceries.forEach(printGrocery);
I understand that for each item in the groceries array the function printGrocery will be executed.
What I just cannot get my head around is why the printGrocery function understands what ‘element’ as a parameter represents. To me it seems like it is inexplicably able to know that element is an item in the array.
I am able to make the code run in all the exercises but I am doing it without a true understanding of what is happening.
I know that my misunderstanding here is pretty fundamental and the explanations already in this thread would be sufficient for most, so your patience and explanations are appreciated.
Thanks,
K
Array.forEach() iterates its context array and returns nothing. We write the action in the form of a function, or callback. That function is called on each iterated value in the array.
printGrocery() is the callback function written as a standalone object, making it useful to the whole program, not just this one method call.
Array.forEach(callbackName)
We pass the function name only, without invoking it (pass by reference). The iterator will invoke it using the internal iteration variable as argument, which is represented in the function parameter by element.
Let’s slip back to a normal for loop to illustrate the abstracted work done by the iterator…
for (let x of array) {
printGrocery(x);
}
The iteration variable x is the akin to the internal variable to which we earlier alluded.
of is the membership operator that first appeared in ES2015 and quickly took hold as a useful tool in ES6. It works equally well with strings or arrays.
Let’s translate the standalone back into a callback expression…
groceries.forEach(x => console.log(x));
Now we can extract that expression and make it a standalone…
const printGrocery = x => console.log(x)
and now,
groceries.forEach(printGrocery);
Starting to click?
Having a standalone function that can stand in as a callback and as a utility function to the rest of the program has more bang for the buck Let’s make our standalone into a generic function.
const log = x => console.log(x);
groceries.forEach(log);
anyArray.forEach(log);
log('Math is fun') // Math is fun
In the beginning It was confusing for me too, so instead I use x as a parameter, like this:
const bigNumbers = numbers.map( X=> {
return X * 10;
});
Once you get use to it, you can go back to normal.
Honestly you can use any word, so make up yours… personal…
Quite the contrary. Don’t make it personal. Make it public. How would we best portray this object in the public view. Given a list of numbers it makes perfect sense in the real world, the public one, to describe the individual values as, number.
for number in numbers
number => number * 10
Don’t be frivolous when choosing variable names. Be practical and respectful of your readers.
Using the X as a parameter helped me so much! Thank you!
mtf, I appreciate your direction about readability for others but for learning, I also think that X or eachNumber or just reusing bigNumbers is easier to get the idea and avoid single-character typos. For example below, using the same reference as the original array helped me to understand the idea better. I bet this could cause other problems later but it helped to initially understand that number is just each value in the numbers array.
const smallNumbers = bigNumbers.map(bigNumbers => {
return bigNumbers / 100
})
Consider,
f(x) = ax + b
a and b are constants, and x is the variable.
const smallNumbers = bigNumbers.map(x => x / 100)
What makes it difficult to understand what x is doing, above?
Hello, I am getting confused.
This is the correct code:
const smallNumbers = bigNumbers.map(num => num/100);
My version was:
onst smallNumbers = bigNumbers.map(bigNumber{
return bigNumber / 100;
});
what did I do wrong in this?
Missing the fat arrow.
Oh! I see totally looked over that, but would using bigNumber over num be ok?
The name we choose is up to us, so long as it doesn’t collide with other variables and is not a reserved word keyword. In a callback it is not necessary to give a variable a name. A simple letter is enough. Everything is right there, and we know it is an iterative process. Simple names means simple to read and debug, in many cases.
Ok Thank you! 
This was very helpful-thank you!
number is a parameter. In this case this is the ITEM is going to be pass and you are going to make reference of this inside your block code. It’s the equivalent of the ITEM pass, you can name it as you want to
This was not addressed adequately in the lesson, thank you so much for clarifying this information! I’ve been stumped for 2 days of this lesson and it all just immediately clicked from reading this comment. Thanks so much!