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.