Lately, I've noticed a trend towards the inappropriate use of Array.map both in tutorials and production code. I'm not sure exactly why this is happening, but I think it may stem from the prevalence of Array.map in React JSX components. JSX code typically uses Array.map to render a component hierarchy for each item in an array.
The example above shows a component that renders an unordered list from an array of objects (named 'items'). Each item in the list is rendered with the `content` property of the current object ('item') as the `items` array is enumerated. If you've worked with React or similar rendering libraries before, this should be familiar. But a few details might not be completely obvious:
1. The 'items.map' statement returns an array.
2. The returned array is used, even though it isn't assigned to a variable or constant.
This can made more explicit by rewriting the component as follows:
There is no behavioural difference between this and the previous version of 'ItemsList'. The only change is that the 'items.map' statement's return value is now assigned to 'const listItems' before rendering. Whether you use one approach over the other in practice is mostly a question of style. The point of this example is to make the render flow more explicit. In either case, the `items` array is enumerated by the 'items.map' statement, which returns an array of JSX components to be rendered.
The React/JSX example demonstrates the correct use of 'Array.map' - as a means of transforming the contents of an array. Here are some conventional examples:
Now that we've looked at some appropriate use cases for Array.map, let's look at an inappropriate use case:
To put it simply, just because something _works_ doesn't always mean it's correct or appropriate. The use of 'Array.map' in _Example 4_ is inappropriate because it doesn't conform to the method's intended purpose. True to its name, 'Array.map' is intended to be used to map (or transform) data from one structure to another. All the appropriate use cases we looked at follow this pattern:
· An array of data is mapped to an array of JSX components.
· An array of numbers is mapped to an array of the same numbers multiplied by 2.
· An array of objects representing people is converted to (or extended with) their full names.
Using 'Array.map' for anything other than mapping creates a few problems. First and foremost, it makes the code less clear. A developer reading code should expect 'Array.map' to perform some kind of transform and for the return value to be used. Second, the return value is always created whether you use it or not. In Example 4, the 'Array.map' callback returns 'undefined'. That means the 'Array.map' statement returns an array containing an 'undefined' value for each index - [1,2,3,4,5] maps to '[undefined, undefined, undefined, undefined, undefined]'. Aside from being messy, there are performance costs associated with the unnecessary creation and disposal of those unused return values. Used in this way, 'Array.map' is slower than the appropriate alternative, 'Array.forEach'.
If we rewrite Example 4 using 'Array.forEach' instead of 'Array.map', we eliminate these problems:
Array.forEach is intended to be used this way and does not create an unnecessary return value for each item in the array. It's both clearer and faster.
'Array.forEach' is similar in concept to a traditional 'for' loop, but has a few practical advantages. The obvious advantages are clarity and brevity. I think we can all agree that 'Array.forEach' is easier to read and write:
Another hidden advantage is that Array.forEach handles arrays with uninitialized or deleted indexes (sparse arrays) gracefully. Consider the following example, which enumerates an array whose third index is uninitialized:
Notice that 'Array.forEach' skips the uninitialized index, thereby avoiding any problems that may be created by working on an uninitialized (or deleted) value. In most cases this is a nice safety feature to have. The 'for' loop is unforgiving and enumerates uninitialized values just like initialized values. If you want to ignore them, you have to do it manually. The side effect of having 'Array.forEach' perform those checks for you automatically is that it's somewhat slower than a 'for' loop written without checks. Before you go rewriting all your 'Array.forEach' code with 'for' loops to try to save a thousandth of a millisecond, keep in mind that the performance hit is negligible in the vast majority of real world use cases.
Why should you choose 'Array.map', 'Array.forEach' or a traditional 'for' loop?
· Choose 'Array.map' if you need to create a new array containing transformations of the items in the source array.
· Choose 'Array.forEach' when you simply need to enumerate the values in an array.
· Choose a 'for' loop only if absolute performance is critical (at the expense of stability and readability) or you still have to support Internet Explorer 8 (in which case you have my sympathy).
What happens if you wait too long to replace old technology?