What is the concept of Array.map?

array-map, arrays, javascript, jquery, mozilla

Solution

Let's rewrite it a bit, and start working from inside out.

var mapCell = function (row) {
  return columns.map(
    function(column) {
      return { 
        column : column, 
        value : getColumnCell(row, column)
      }
    }
  )
}

The `function(column)` part is essentially a function that takes a column as a parameter, and returns a new object with two properties:

- column, that is the original value of the parameter, and

- value, that is the result of calling the getColumnCell function on the row (external variable) and column (parameter)

The `columns.map()` part calls the `Array.map` function, that takes an array and a function, and runs the function for every last item of it, and returns the results. i.e. if the input is the array `[1, 2, 3, 4, 5]` and the function is something like `isEven`, the result will be the array `[false, true, false, true, false]`. In your case, the input are the columns, and the output is a list of objects, each of which has a column and a value properties.

Lastly, the `var mapCell = function (row)` part declares that the variable `mapCell` will contain a function of one variable called `row` - and this is the same `row` that is used in the inner function.

In a single sentence, this line of code, declares a function that when run, will take a row and return values for all columns for that row.

Problem

I am having problems understanding the concept of `Array.map`. I did go to Mozilla and Tutorials Point, but they provided very limited info regarding this. This is how I am using `Array.map`. It is a little complex (a bit of d3.js involved; just ignore it) ``` var mapCell = function (row) { return columns.map(function(column) { return { column : column, value : getColumnCell(row, column) } }) } //getColumnCell is a function defined in my code //columns is array defined at the top of my code ``` I do not understand exactly what this code is doing. I know its returning a new array and stuff but this part is a little tricky! If you want to go through my code: http://jsfiddle.net/ddfsb/2/ I am using console to actually understand what's happening inside the code. Looking at the answers provided, I have clearly understood the concept of `array.map`. Now the only part remaining is parameters rows and columns, but there is a difference between row and rows, and column and columns in the fiddle provided ``` var rows//completely ok var columns//completely ok funcion(row)//here,source of row is unknown.getColumncell function utilizes this parameter further making it more critical function(column)//source of column is unknown..getColumncell function utilizes this parameter further making it more critical ```

Original source