Which_Array_Function_When.js

// Which Array Function When?
// Andrew Steele
// https://www.codementor.io/andrew565/which-array-function-when-jbtnzytza


// Which Array Function When?
//***
// Return one thing for each existing thing: map()
// Return only some of the existing things: filter()
// Return only one new thing: reduce()
// Don't return anything, but do something with each existing thing: forEach()
//***

// Return one new entry for every existing entry: map()
//***
// If you have an array of values, and you want to do something to each entry in that array and return a new array with the new values, then map() is your friend. Here's a simple function that takes an array and doubles every entry. Notice that, with the newer arrow syntax, we don't have to use the function keyword, the return keyword, or curly brackets. That's because arrow functions give us an implicit return for 'simple' functions like this one.
// plain JS
const originalArray = [1, 2, 3];
const newArray = originalArray.map(function(item) { return item * 2;
});
console.log(newArray); // -> [2, 4, 6]
// ES6
const originalArray = [1, 2, 3];
const newArray = originalArray.map(item => item * 2);
console.log(newArray); // -> [2, 4, 6]
//***


// Return a new array with only some of the existing entries: filter()
//***
// Filter is probably the easiest array function to understand, because it is so well-named. Filter takes an array of values, performs a function or comparison on each value, and then returns a new array of just the values that pass it's test (what we call 'truthy' values). Here's an example that takes an array of numbers and returns just the ones that are larger than 5.
// plain JS
const originalArray = [1, 9, 4, 2, 42];
const newArray = originalArray.filter(function(item) { return item > 5;
});
console.log(newArray); // -> [9, 42]
// ES6
const newArray = originalArray.filter(item => item > 5);
//***


// Return one new thing only: reduce()
//***
// Sometimes you have an array of values and just want to return one new thing from them. Reduce takes an array, performs a function or comparison on each item, and then does something to what's called an 'accumulator'. This is one of those functions that's actually easier to describe with an example, because the terms one has to use to describe it are just as confusing as the function itself! Suppose you have an array of names, and you want to count the number of times the name 'Bob' shows up. As you can see, the arrow function didn't save us as much typing this time, because we had to provide two parameters to the function and then had logic before we could return, so we still needed curly brackets. The 0 at the end of the reduce function is the value we start off the accumulator with, adding 1 to it if the value we encounter is "Bob", otherwise we return the accumulator as it currently is. If you don't return anything, then the next time the function is run the accumulator will be undefined.
// plain JS
const originalArray = ["Alice", "Bob", "Charlie", "Bob", "Bob", "Charlie"];
const numberOfBobs = originalArray.reduce(function(accumulator, item) { if (item === "Bob") { return accumulator + 1; } else { return accumulator; }
}, 0);
console.log(numberOfBobs); // -> 3
// ES6
const numberOfBobs = originalArray.reduce((accumulator, item) => { if (item === "Bob") { return accumulator + 1; } else { return accumulator; }
}, 0);
//***

// Do something with each array value but don't return anything: forEach()
//***
// Sometimes you'll have an array of values that you want to do something with, but don't need to keep track of what the return is from each function call. This is what forEach() is for.
// plain JS
const originalArray = [1, 2, 3];
originalArray.forEach(function(item) { doSomething(item);
});
// ES6
originalArray.forEach( item => doSomething(item); );
//***


// Final Notes
//***
// Simple and sweet. These are the simplest use cases I could come up with for each function to try and make it as easy as possible to understand when you should use each. There is a huge amount of tasks you can do with these functions, and there is an 'advanced' form of each of these functions that gives you the current index too:
// ES6
arr.map((item, index) => {})
arr.filter((item, index) => {})
arr.reduce((accumulator, item, index) => {})
arr.forEach((item, index) => {})