Array Methods

[00:00:00]
>> WebDevSimplified: Now the final kind of control flow thing that I want to talk about is going to be a relatively brief foray into array methods because arrays have a lot of helper methods on them that make it relatively easy for you to be able to do complex things with looping and so on. So we looked at how you can use a for loop as well as a for of loop, but we also have the ability to do these loops directly on arrays.

[00:00:19]
So arrays have methods such as forEach which allow you to just loop through every value in an array and do something for you. And this is a very common place where you're going to be using arrow functions to define this. So forEach is by far the most common of these different array methods. All it does is loop through every value in your array. It passes that value into your array. In our case here, each number from our array passes it in as the first value for this function, and we can do whatever we want with this.

[00:00:45]
This is a function that takes a callback and that callback runs for every single item inside of our array. So it runs for 1, 2, 3, 4, and 5, and you can see it prints out 1, 2, 3, 4, and 5. We can also get the index as well. So this function not only takes a single property for the individual value, but it also takes a second property which points to the index of where you are in that array. So here we get that value of our name as well as the index which will be 0, 1, or 2.

[00:01:11]
You can see it prints out Kyle 0, Sarah 1, and John 2. So we can not only get the actual value, but we can get the index as well. And these forEach loops essentially entirely replace the need for you to actually do a for loop or a for of loop with arrays because this is much easier to write syntax in my opinion. Now there's also a bunch of other methods that allow you to do things as well. For example, map is very similar to forEach and that it loops through every item in your array, but instead we're mapping our array to a brand new value.

[00:01:41]
We're essentially transforming every value in our array to a new value. So map, just like I said, it takes in a callback that gives you your value, but instead you return a new value and it essentially gives you a brand new array that takes the value at that index and replaces it with the new one. So in our case, our first value 1, we pass in number 1, 1 times 2 returns 2. So the very first value in our new array will be 2.

[00:02:05]
If we pass in 2, 2 times 2 is 4, so the new value in our array will be 4. Essentially we're just doubling all the numbers in our array and if you look down here, you can see this array is 2, 4, 6, 8, 10, and the original is 1, 2, 3, 4, 5. So this allows us to create a brand new array that essentially updates these values to new values based on whatever transformation that we want to do. Now the important thing to note about map is it always returns a new array.

[00:02:28]
It never modifies the original array. It always returns an array of the same length because it loops through each one, and it's really just there to transform the elements of your array into something new. Really common use cases with objects. Let's say I have an object array of people, and I want to just get the name of each of these people. Well what I can do is I can loop through each person, get me the name property of them, and return that value to log it out so I can get just the names of the people instead.

[00:02:53]
The filter method is a method that allows you to essentially create a brand new array from a set of values that match a certain keyword. So here you can see we have this filter function. It loops through each value just like forEach map, but instead of returning what we want our new array value to be, we instead return either true or false. If we return true, this value will end up in the brand new array.

[00:03:14]
If we return false, it'll not end up in the new array. So here you can see we have a numbers array 1, 2, 3, 4, 5, and we want to only get the numbers less than or equal to 2. So we're doing a quick check. If our number is less than or equal to 2, it'll return true, which means it'll show up in our new array. If it returns false, it removes it from the array. So our small numbers array here is 1, 2, while our original array stays exactly the same.

[00:03:39]
Again, all of these fancy array methods, none of them actually modify the original array. Now find is very similar to filter, but instead of returning a brand new array, it's going to return to you just the first element that matches the thing you want. So if we want to get the first number that's larger than 2, we can call the find method. It's going to loop through each of the values in our array, and the first time that we get something that returns true from here, it'll give us that value.

[00:04:03]
So our first big number is 3 for our case because that's the first number in our array that is greater than 2 when we loop through from beginning to end. Now, some more functions we can use for checking certain values is going to be some, and we also have every which is essentially the opposite. Some allows us to check if at least one element in our array matches some type of test. So if we want to loop through our array to check to see if it has any large numbers at all, we can take our numbers array, call that some function.

[00:04:32]
It'll loop through our array, passing in each individual number here, and then if this returns true at least once by the time we run through our entire array, this entire function is going to return true. So has large number will be true because we have at least 1 number in our array greater than the value of 3. Down here we have the exact same loop, but this one's checking if our number is less than 0, and if we look, our array only has positive numbers, so this will return false because none of the values in our array are less than 0.

[00:05:02]
Every is the opposite. We're checking to see if every single element in our array passes a specific test. So this first one I want to check to see are all of our numbers positive, so we loop through each number and we check is number greater than 0. As long as every single iteration returns true, the entire thing will return true. If any of them return false, then the entire thing is going to return false.

[00:05:22]
For example, here, we're checking if all of our numbers are greater than 3. Well, clearly we have 2 numbers less than 3, so this entire thing is going to return to us false. Finally, we move on to the most complicated of the array methods, which is reduce. The reduce method is really powerful because it has a lot of different use cases for it, but it's also quite confusing because it has a few extra things inside of it.

[00:05:45]
For the reduce method, it not only takes in each individual iteration of our array, the number, but it also takes a second parameter which technically comes first, and that is usually called the accumulator. And this is essentially the thing that you're building up throughout your entire array. This one's going to be a little more complicated, so I want to look at the individual code for it ourselves.

[00:06:03]
So inside here we have our accumulator, which is that thing that's building up, and then we have our individual number itself, each iteration of our array. And we also have a second parameter we pass to the reduce function. If we look over here, you can see after our function we're passing the value of 0. This second value that we pass in is whatever the starting value for our accumulator is. So we pass in 0 here, so the first time we run our array, this accumulator is set to the value of 0.

[00:06:30]
Then what happens is we run through this loop. So we call this function with 0 and our first number, which is 1. So 0 + 1, that returns to us 1. And whatever we return from this reduce function is the new value for our accumulator the next time we loop through. So now our accumulator is 1 because 0 + 1 is 1. Our number here is 2 because that's the next value in our array. So now we do 2 + 1. That gives us 3.

[00:06:54]
So our accumulator is 3, and our number also happens to be 3 because that's the third element in our array. 3 + 3 is 6, so the next time we loop through this, our accumulator is set to 6, our number is set to 4, and then we do 6 + 4 is 10, and finally we get 10 and 5. 10 + 5 is 15, so this will log out 15 as the final result. Essentially, every time we loop through our reduce, whatever we return from it is the new value for whatever our accumulator is going to be for the next time we loop through that particular section.

[00:07:23]
Any questions about these array methods? I know we went through them super quick, so if any questions, please let me know. So for the true false evaluations, is that truthy and falsy? If it's not, yes, yes, any time that JavaScript needs to determine true false, it always does coercion to figure out a true or false value. So if you had zero, for example, that would count as false.