JavaScript Arrays

array.prototype.map()




10 Example Questions Answered with Step By Step JavaScript .map() Array Method Code




  1. How can I create a list of NFL teams, Capitalize all characters and sort ascending?
    • Array Methods Used: map(), .sort(), .join()

  2. How many characters are in the longest team name?
    • Array Methods Used: map(), .sort()

  3. What team(s) has the longest team name?
    • Array Methods Used: .map(), .sort(), .filter()

  4. What was the biggest loss of the season for the Philadelphia Eagles?
    • Array Methods Used: .map(), .sort(), .filter()

  5. What would one extra touch down in each game do to my season win loss record?
    • Array Methods Used: map(), .filter()

  6. How can I build a list of team names as hyperlinks from my JSON data set?
    • Array Methods Used: map(), sort()

  7. How can I build an html table that shows Team Name, Annual Salary, and Annual Salary with 20% increase?
    • Array Methods Used: map()

  8. What is the total salary paid to teams located in NY state?
    • Array Methods Used: map(), reduce()

  9. How can I compare the points we scored in the most recent season verses points we allowed to be scored against us?
    • Array Methods Used: map(), .sort()

  10. If we have the NFL allowed maximum number of players on our team, what is the average player salary? How much do we have left to spend before we hit the NFL salary cap?
    • Array Methods Used: map(), sort()


  1. The step by step instructions are in the comments of the JavaScript screen shots and in the code dump at the bottom of this article.
  2. The JavaScript for each Question is loaded just before the closing body tag.
  3. Level: Intermediate

  4. Parameters: value, index, array

  5. Prerequisites: Make sure you understand how to use F12 or right-click and inspect on a web page to see the console.

  6. Notes: JavaScript methods are so intertwined, it is impossible to show useful demonstration code without using other methods that we might not have explained yet. I will do my best to add inline comments whenever possible.

  7. The .map() method calls a specific function for each element in your original/source array and returns an array based on the results of your function inside the parentheses of your map method. You can use older style functions or newer arrow functions. The .map() method returns a new array just as the .filter() method.

  8. High Order Function - a function that takes a function as an argument, or returns a function. A High-order function is in contrast to first-order functions, which don't take a function as an argument or return a function as output. Here is a great article on Medium that goes into detail on high order functions.

  9. Know that these array methods are chain-able. Meaning you can have a block of code that uses many of these array methods chained together and executed in order. Many can be used multiple times in the same code block.

  10. The .map() is a non-mutating method. This means the original array is left unchanged.

  11. All Arrays in JavaScript have a .map() method that allows us to loop through every element in the original array, perform some action and then generate a new Array based on our actions.

  12. The map method has a very similar syntax to the .forEach() method except that the .map() method creates a new array for the results.

  13. The .map() method has a return statement that creates the elements of your new array.

  14. Usually your first question is should I use .forEach() or .map(). Do you want a new array with your new elements? Then use .map().


Question # 1 - How can I create a list of NFL teams, Capitalize all characters and sort ascending?




HTML in Visual Studio Code for Question 1

1a-2020-02-13_10-30-42.png

Google Chrome Console for Question 1

1b-2020-02-13_10-30-42.png

JavaScript in Visual Studio Code for Question 1 - Screen Shot 1 of 1

1c-2020-02-13_11-01-51.png



Question # 2 - How many characters are in the longest team name?



HTML in Visual Studio Code for Question 2



Google Chrome Console for Question 2



JavaScript in Visual Studio Code for Question 2







Question # 3 - What team(s) has the longest team name?


Team Name Number of Characters In Team Name


HTML in Visual Studio Code for Question 3



Google Chrome Console for Question 3



JavaScript in Visual Studio Code for Question 3







Question # 4 - What was the biggest loss of the season for the Philadelphia Eagles?



HTML in Visual Studio Code for Question 4



Google Chrome Console for Question 4



JavaScript in Visual Studio Code for Question 4