Iterate over Arrays with map challenge - not understanding part of it

#1

So I finished this challenge, and it was pretty straight forward, but one thing my brain isn’t quite understanding, is where they got “val” from in the first place; I get that val is an argument for the map’s function and I get that it’s supposed to be the specific index for the array at a given iteration, what I don’t understand is how the function KNOWS that val is supposed to be that index. like I could understand having something like a for loop where you declare a variable ‘val’
but why / how does the map know to put the index value in that postition?

Sorry for the weird question, If it helps I did read up on maps, but it didn’t really answer my question. I feel like it’s just something simple right infront of me that I’m missing.

Your code so far

var oldArray = [1,2,3,4,5];

// Only change code below this line.

var newArray = oldArray.map(function(val){ // how is 'val' getting the index & its value?
  return val + 3;
  
});

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36.

Link to the challenge:
https://www.freecodecamp.org/challenges/iterate-over-arrays-with-map

#2

What map does, essentially is it gets the value at each index, then hands that value off to whatever function is in the parenthesis as an argument.

so of course you could call val anything, its just so you have some name to reference that data in the function.

It’s a bit tricky to word in a way that I think will satisfactorily answer your question.
Maybe its more sensible to say it like this?

.map calls a function and passes that function the value from each index in an array.

hope that helps, and that I didnt just confuse you more.
And as a relative noob, I dont have the highest confidence in my knowledge on this so, if I’m wrong, someone please correct me
Good Luck.

#3

Take a look at the example below and the results that print to the console to maybe understand what is going on with the variable names and their position in the order of arguments used in the map function.

var oldArray = [1,2,3,4,5];

var newArray = oldArray.map(function(john, bob, stan){
  // john is the value of the element
  // bob is the index value of the element
  // stan is the original array in which map was called
  
  // if you put the following console.log() you will print 
  // out the value of each of these variables as 

  console.log(john, bob, stan);
  return john + bob * 100;
});
console.log(newArray);

The above results in:

1 0 [ 1, 2, 3, 4, 5 ] // 1st element, 1st element's index, original array in which map was called
2 1 [ 1, 2, 3, 4, 5 ] // 2nd element, 2nd element's index, original array in which map was called
3 2 [ 1, 2, 3, 4, 5 ] // 
4 3 [ 1, 2, 3, 4, 5 ] //
5 4 [ 1, 2, 3, 4, 5 ] // last element,  last element's index, original array in which map was called

[ 1, 102, 203, 304, 405 ]

You do not have to use all three arguments, but they are available for you if you list them in the anonymous function. Sometimes you will see something like:

var oldArray = [1,2,3,4,5];

var newArray = oldArray.map(function(_, thisIsTheIndexValueOfElement){
  return thisIsTheIndexValueOfElement + 100;;
});
console.log(newArray); // results in [100, 101, 102, 103, 104];

The “_” is a valid JavaScript variable name and is typically used by coders to indicate a place holder for a variable you will not be using in your function. It does not mean you can’t use it, but it is a way of informing the reader of code.

Hopefully this helps make things clearer around the map function. You will have a similar situation when using filter, some, every, reduce and other higher order functions on arrays. You just need to read about what each function argument represents (which is different for some of the high order functions).

#4