Mapping Arrays with JavaScript

When learning the basics of JavaScript, one will come across arrays quite quickly. Arrays are useful and very malleable. They can be filtered through, reduced, expanded, and mapped. When mapping an array, one is accepting a callback function and passing each element so that it returns a new array that is the same length as the original with the data modified in the result but not permanently altering the original array.

When one comes across the map() method, it is often referred to as Array.prototype.map(), as in the case of freeCodeCamp [1].

The map() method is great for scanning through data for specific pieces of information in each array and creating a new array with it. I have an example below:

Using the above data related to some of the most prominent Japanese leaders of the Meiji Restoration, I can use the map() method to pull the names of these people and create a new array with them.

I hope this helps beginning students of front end or full stack web development in understanding an essential part of JavaScript. Map() is widely applicable for numerous types of data in arrays, from retrieving names to product prices.

---

Sources:

1. [https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array]

2. [https://www.w3schools.com/jsref/jsref_map.asp] W3 Schools is another great resource for learning about arrays. They succinctly list the 3 major points when it comes to map():

"map() creates a new array from calling a function for every array element.

map() does not execute the function for empty elements.

map() does not change the original array."

1. [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map]

2. [https://www.youtube.com/watch?v=G6J2kl1aVao]