# Awesome Array Methods

I wish every data structure in JavaScript was as cool as Arrays. No, really, I'm not being hyperbolic or sarcastic, and I'm going to prove it.

Array.map() is used to iterate over an array and return a new array which contain values that each loop iteration returns. map() takes a single argument which must be a function. This function will be called with 3 different arguments: currentValue , currentIndex, inputArray. Mostly in the wild you'll only see the first argument being used (the current value in the array for this loop iteration), but you might find the other 2 values... useful.

Let's put all this into a concrete example that makes sense. Let's say I have an array of words that I want to put in all caps. To modify my array, I have to loop through it, which of course can be done with some archaic method using temporary variables and for...i loops (eww):

const startArray = [ 'bleh', 'foo', 'MoOoO', 'supercalifrag' ];

const arrToUpper = input => {
  const temp = [];
  for ( let i = 0; i < input.length; i++ ) {
    temp.push(input[i].toUpperCase());
  }
  return temp;
}

const upperArray = arrToUpper(startArray);

But by golly, that's a lot of code for something that can so easily be done not only without an intermediary function but also with ONE SINGLE LINE OF CODE:

const startArray = [ 'bleh', 'foo', 'MoOoO', 'supercalifrag' ];

const upperArray = startArray.map( word => word.toUpperCase() );

Now isn't that nicely short & sweet? Can you think of anything else that map() can be used for?

Array.filter() is used to remove things you don't want from an array, by... well, by filtering them out. It will return a new array where some array elements have been removed. Which elements? They're determined by a function - filter() takes a function which needs to return a truthy or falsy value (see the Conditions page to know what that means) - truthy values keep the element in, falsy values throws the element in the garbage and you never see it again.

As a concrete example, let's say I want to only keep values that are odd in an array, and eliminate any even number. We'll use a tiny bit of mathematics to do this, more specifically the modulo function, which in JavaScript is used with %. Basically, if you % 2 a number, it'll return 0 ("falsy") if it's even, 1 ("truthy") if it's odd. Simple, right? Let's do this!

const someNumbers = [ 1, 2, 61, 332, 5643, 42, 0, 111 ];

// we could of course do it the lame way
const filterOdds = input => {
  const temp = [];
  for ( let i = 0; i < input.length; i++ ) {
    if (input[i] % 2) {
      temp.push(input[i]);
    }
  }
  return temp;
}

const onlyOdd = filterOdds(someNumbers);

// but bleh. no way, Jose!
const betterOnlyOdd = someNumbers.filter( n => n % 2);

Isn't that beautiful? Now how would you make a filter for even numbers instead? Just invert the condition!

const onlyEven = someNumbers.filter( n => !(n % 2) );

Let me leave you with a last super useful trick that's a common enough question to warrant its own little example. You can filter out null and undefined values easily from an array using one of JavaScript's built-in function, Boolean(). Boolean() will return an actual true/false value, and it can be used directly in a filter() function as described in the functions page. Here it is:

const noEmpties = myArray.filter(Boolean);

You can of course use any function that expects an input and returns a boolean value here, whatever that function is. I'll leave the rest to your imagination for now.

This one is really simple. Array.find() is exactly the same as array.filter, except that when it finds a result (when the condition returns true), it will return the value from the current iteration, and stop the loop. So, it takes the same kind of function as Array.filter() but instead of returning an array of values, it returns the first value. If you want to only get one value, this is more efficient than using filter() then getting the first from it.

const someNumbers = [ 1, 2, 61, 332, 5643, 42, 0, 111 ];
const firstEvenNumber = myArray.find(num => num % 2); // 2

Another simple one! Array.some() takes in a function that will iterate on every element in the array. If any of the values in the array returns true on that function, then Array.some() stops processing and returns true. This makes it a pretty efficient method of checking if something is in the array, as it will not traverse the entire thing unless the value isn't located in the array.

const vals = ["John", "Paul", "Ringo", "George", "Pete"];
const containsAnA = vals.some(name => name.includes("a"));
// true, and stops when it reaches "Paul".

const containsAnM = vals.some(name => name.includes("m"));
// false and goes through the whole array

In the line of "just like the last one", Array.every() does the same thing as .some() except it will always traverse the entire array, and return true if, and only if, the function you provide it returns true on every single element of the array.

const vals = ["John", "Paul", "Ringo", "George", "Pete"];
const missingA = vals.some(name => !name.includes("a"));
// false, one of them contains an A

const missingM = vals.some(name => !name.includes("m"));
// true, none of them contains a M

Array.includes() is a very simple method of checking whether a value is included inside an array. Very simply put, if you have an array of values, you can know if it includes a particular value or not. This returns a boolean, so it's very often used in conditions.

const someNumbers = [ 1, 2, 61, 332, 5643, 42, 0, 111 ];

console.log(someNumbers.includes(1)); // true
console.log(someNumbers.includes(42)); // true

if(someNumbers.includes(5)) {
  console.log("5 Conditions make the world go round, blah!"); // won't print
}

Array.includes can also be very useful to verify if a string is equal to "one of many choices". As mentioned in Combining Conditions, it replaces the pattern if(thing === "blah" || thing === "foo"), in the following manner:

const string = "hi";

if(["hey", "hello", "hi", "wazaaap"].includes(string)) {
  // will be true since the array includes "hi"
}

Array.reduce() is essentially used to "add together" things from an array, used in concepts such as counters or concatenation of specific strings. It works by accepting a function with 2 useful parameters: accumulator and currentvalue. It also takes a second parameter, the default value, which is sent to the accumulator variable on the initial iteration of the loop. Also, enough fancy words, let's look at some code!

const arr = [1, 2, 3, 4, 5];

const total = arr.reduce( (acc, current) => acc + current );
console.log(total); // 15

So, obviously this code is adding each number in the array to the accumulated value, right? You get an accumulated value of 1, then 3, then 6, 10 and finally 15. Simple as that.

Sounds boring though, let's make it a bit more exciting. Arrays can contain objects, and we can also use that to our advantage. Let's say we have an array containing data about groups. Each group can contain multiple users, and those users are in an array in the object. Our goal now is to find the total number of users for all the groups. Let's do that:

const groups = [
 {
   name: 'Legends',
   users: [ "Ripp", "Ray", "Sara", "Martin", "Jefferson", "Kendra", "Carter"],
   leader: "Ripp"
 },
 {
   name: 'Fantasic',
   users: [ "Reed", "Susan", "Johnny", "Ben"],
   leader: "Reed"
 },
 {
   name: 'Avengers',
   users: [ "Steve", "Tony", "Thor", "Clint", "Natasha", "Peter"],
   leader: "Tony"
 }
];

const superheroes = groups.reduce( (acc, group) => acc + group.users.length, 0);
console.log(superheroes); // 17

The default value here is due to the array containing objects - the reduce function must have a 0 value so that additions will be integer additions, and not just objects or strings or something else.

[ TBD cuz lazy right now ]