Map returns the value of an array, as a new array.
In my quest to learn it, I went to mozialla and found the explaination unclear. I started playing around with it to learn it.
var pets = ['cat', 'dog', 'mouse', 'bird']
var more_pets = pets.map(function(value){
return value;
})
pets
=> ['cat', 'dog', 'mouse', 'bird']
more_pets
=> ['cat', 'dog', 'mouse', 'bird']Yay, I didn't break anything.
But what did this buy me? Try again with an uppercase.
var pets = ['cat', 'dog', 'mouse', 'bird']
var more_pets = pets.map(function(value){
return value.toUpperCase();
})
pets
=> ['cat', 'dog', 'mouse', 'bird']
more_pets
=> ["CAT", "DOG", "MOUSE", "BIRD"]Is that just because I assigned to a new variable, or something else going on?
The documentation says map's callback has use of four arguments
var pets = ['cat', 'dog', 'mouse', 'bird']
var pets_info = pets.map(function(first, second, third, fourth){
return [first, second, third, fourth] // put into an array
})
pets_info
=> [Array[4], Array[4] , Array[4] , Array[4]]
pets_info[0]
=> ["cat", 0, Array[4], undefined]Oh now it's starting to make sense. For clarity I should change the names of my arguments from;
// I didn't know what the args did so I just numbered them
(first, second, third, fourth)
to
// More accurate naming
(value, index, original_array, fourth)
Ok, Back to pets_info[0]
pets_info[0]
=> ["cat", 0, Array[4], undefined] So, Map's callback takes at least 3 arguments.
The first one is the value of the current item being looped over so, 'cat' in this situation.
Next, you are given the array index
You can get the entire array back if desired. I can see that to be pretty handy. Maybe something like checking the previous or next value of the array could influence how you interact with the current value.
It seems like the API is telling me that the fourth argument is this but I am not finding a good use for it.
I am new enough to programming that I am still trying to decipher what's magic and what's my responsibility. If you're still reading, chances are you're on the junior side too. Developers who know about map() have long since moved on to .gif hunting.
After learning about map I had an AH-HA moment about programming in general.
In the past, I would get tripped up when pairing with an experienced developers who took educated guesses at the way the function should work and got it right. That gave me the impression I had missed out on some fundamental concepts about how functions worked.
My Ah-ha moment was realizing that a function's arguments have to be designed and used in a specific way. You can only know what that order is if you wrote it, take an educated gues, or read the documentation. I realized that nobody innately knows how other people's code works.
Knowing that a function is designed all they way through gives me confidence that when I have to use someone else's function, then I should be able to mimic it's existing pattern for my own use.
It's also not unreasonable to expect that a co-worker will document their methods somehow be it; tests, api, proper naming, or comments.
So the same goes for me. I should write code with an awareness that other devs are going to use it and I had better do a good job of clearly communicating how it works.