What is the concept of Array.map?

Question

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/

UPDATE 1

I am using console to actually understand whats 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

Any help??

Answer 1

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.