Question

194

What is the concept of Array.map?

rated 0 times [ 195] [ 1] / answers: 1 / hits: 35700 / 11 Years ago, fri, june 28, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kenyonc

Add To Favorites

Follow

Total Points: 235

Total Questions: 106

Total Answers: 125

Location: Bangladesh

Member since Sat, Jan 23, 2021

3 Years ago

answered 11 Years ago grayson · Accepted Answer

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.