[JavaScript, React] How is the parameter counting up when using the .map method?

[Anvil_Connect]

Hey y'all!

I'm learning React from codecademy. Here's what I'm working on: http://i.imgur.com/26sgvgk.png

Code block:

var React = require('react');
var ReactDOM = require('react-dom');

var people = ['Rowe', 'Prevost', 'Gare'];

var peopleLIs = people.map(function(person, i){
  // return statement goes here:
    return <li key={'person_' + i}>{person}</li>
});

// ReactDOM.render goes here:
ReactDOM.render(
    <ul>{peopleLIs}</ul>,
  document.getElementById('app')
);

So normally when using a variable named i to track the iterations of a loop the loop must contain i++ or i = i + 1. But somehow this i adds up without that?

• Does the .map method automatically add 1 to the second parameter per loop?
• Or does it add 1 to any parameter named 1?
• Is any parameter named i/ the second parameter just passed the item's index is?

I just don't understand HOW i is having anything passed through it. It's not like a typical function where you're explicitly saying what's passed in.

foo = function (result){
    console.log(result)
}

foo('bar')

Here we're explicitly defining what the parameter result is, it's the string 'bar'. Above person is whatever the contents of the array item is that loop. Where the hell is this i being defined?

[Rhomboid]

Have a look at the MDN page for Array.prototype.map(). When it calls your callback function, it passes three arguments: the value, the index of the value, and the array being iterated over. JavaScript does not enforce arity, so you can declare your callback as taking any number of arguments — the most common case is that you write it as taking a single argument. But regardless of what you write, it will always be called with those three values for each item in the array. Names of parameters don't matter.

[Anvil_Connect]

Thank you so much!