Leveraging Array Methods the Right Way in JavaScript

In JavaScript, methods like map, filter, concat, and reduce are "pure" – meaning they don't change the original array. Instead, they produce a new array based on the logic you supply.

For instance, when you do:

xs.map(x => x.prop);

The original array xs remains untouched, and a brand new array is returned with the mapped values.

But here's a pitfall: some folks might be tempted to use a map just to loop over the array, say for logging:

xs.map((x, i) => console.log(`element #${i}:`, x));

This misuses map, which is intended to transform data, not just to iterate. For side effects like logging, forEach is a much better choice:

xs.forEach((x, i) => console.log(`element #${i}:`, x));

Bad Practice:

Using map without utilizing its return value:

characters.map(character => character.name);
console.log(characters); // The original array remains unchanged!

Recommended:

Use map when you actually intend to create a new transformed array:

const characterNames = characters.map(character => character.name);
console.log(characterNames); // A shiny new array with character names!

The lesson? Make sure to use array methods in a way that aligns with their intended purpose. This ensures that your code is both efficient and easy for others to understand.