function to draw a table row in JavaScript with eloquent and descriptive arguments

Question

function to draw a table row in JavaScript with eloquent and descriptive arguments

I came across this code in chapter 6 of a programming book called "Eloquent JavaScript". I am struggling to understand where the arguments for the function 'drawRow' are coming from. If the outer function drawTable was a method, it would make sense for it to pass an array along with the current index. However, since it is just an ordinary function, I am confused about where 'row' and 'rowNum' are being retrieved from.

function drawTable(rows) {
  var heights = rowHeights(rows);
  var widths = colWidths(rows);

  function drawLine(blocks, lineNo) {
    return blocks.map(function(block) {
      return block[lineNo];
    }).join(" ");
  }

  function drawRow(row, rowNum) {
    var blocks = row.map(function(cell, colNum) {
      return cell.draw(widths[colNum], heights[rowNum]);
    });
    return blocks[0].map(function(_, lineNo) {
      return drawLine(blocks, lineNo);
    }).join("\n");
  }

  return rows.map(drawRow).join("\n");
}

I would appreciate any insights or explanations provided by those who take the time to address this. Thank you!

javascript function

Answer 1

Answer №1

As per the information provided on MDN's page about Array.prototype.map, the callback function used with map typically takes three arguments: currentValue, index, and the entire array. When using drawRow with rows.map, the row represents the currentValue, while rowNum indicates the index.

For a more straightforward illustration, consider the following:

var arr = ['x', 'y', 'z'];

function displayArray(value, index) {
    console.log(index + ' ' + value);
}

arr.map(displayArray);
// This will output:
// 0 x
// 1 y
// 2 z

Answer 2

As per the information provided on MDN's page about Array.prototype.map, the callback function used with map typically takes three arguments: currentValue, index, and the entire array. When using drawRow with rows.map, the row represents the currentValue, while rowNum indicates the index.

For a more straightforward illustration, consider the following:

var arr = ['x', 'y', 'z'];

function displayArray(value, index) {
    console.log(index + ' ' + value);
}

arr.map(displayArray);
// This will output:
// 0 x
// 1 y
// 2 z

Answer 3

Answer №2

When utilizing the map method, the provided callback function (drawRow in this scenario) is invoked with three parameters for each item in the array being processed:

the item itself
the index of the item
the entire array (which is not being utilized in this context)

Additionally, there is an option to specify an object as the context for this within the callback function.

Answer 4

When utilizing the map method, the provided callback function (drawRow in this scenario) is invoked with three parameters for each item in the array being processed:

the item itself
the index of the item
the entire array (which is not being utilized in this context)

Additionally, there is an option to specify an object as the context for this within the callback function.

Answer 5

Answer №3

Like mentioned by others, the map function invokes drawRow with the necessary values. To demonstrate how this works, let's craft a new function from scratch named MAP that also utilizes drawRow with the appropriate values:

function MAP (theArray, callback) {
    var returnArray = [];
    for (var i=0; i<theArray.length; i++) {

        var result = callback(theArray[i],i); // pay attention to this line

        returnArray.push(result);
    }
    return returnArray;
}

The MAP function above takes a function that we provide with two arguments, the value of an item from theArray (theArray[i]) and the index of the item (i).

Now, we can utilize MAP to handle the rows:

MAP(rows, drawRow).join("\n");

Keep in mind that the function drawRow will be passed as the variable callback to MAP and the array rows will be passed as the variable theArray. MAP will then invoke drawRow as previously described with two arguments.

The Array.map() method functions similarly, but it is implemented as a method of array objects rather than a standalone function.

Answer 6

Like mentioned by others, the map function invokes drawRow with the necessary values. To demonstrate how this works, let's craft a new function from scratch named MAP that also utilizes drawRow with the appropriate values:

function MAP (theArray, callback) {
    var returnArray = [];
    for (var i=0; i<theArray.length; i++) {

        var result = callback(theArray[i],i); // pay attention to this line

        returnArray.push(result);
    }
    return returnArray;
}

The MAP function above takes a function that we provide with two arguments, the value of an item from theArray (theArray[i]) and the index of the item (i).

Now, we can utilize MAP to handle the rows:

MAP(rows, drawRow).join("\n");

Keep in mind that the function drawRow will be passed as the variable callback to MAP and the array rows will be passed as the variable theArray. MAP will then invoke drawRow as previously described with two arguments.

The Array.map() method functions similarly, but it is implemented as a method of array objects rather than a standalone function.

function to draw a table row in JavaScript with eloquent and descriptive arguments

Answer №1

Answer №2

Answer №3

Similar questions

What is the process for renaming folders with files in node.js?

Can you save data entered by a user into a text file using JavaScript or a similar technology in HTML, without the need to send it to a server?

Can you explain the purpose of `import type {Node} from 'react';` and how it is used in the App component as: () => Node?

The completion event for Ajax and Json does not activate Google Maps

What is the best library to utilize for uploading an Excel file in a React application?

When using Vue with CSS3, placing an absolute positioned element within a relative wrapper can cause issues with maintaining the

Displaying Material UI Styles: A Challenge

Display a JSON object on a web browser

Retrieve the script's location from the server prior to the initialization of Angular

Is it possible to make a div jump or bounce if it has a flex display?

What is the right rendering strategy to use for shouldComponentUpdate in React?

jQuery for Cross-Site AJAX Communication: Enhancing Website Function

Retrieve the original state of a ReactJs button from the database

Launching a call to action through Ajax in Zend Framework triggers a redirect, but subsequent calls prove to be effective

Comparing HTML5 Drag and Drop to jQuery UI Drag and Drop: What's the Difference

I can't believe I already have 111 npm downloads!

The React syntax is malfunctioning

What is the best way to insert distinct values into an array in mongoDB?

What is the best way to attach a jQuery UI event handler to a button that has been dynamically generated?

What is the process for incorporating an animated gif into a scene?