Use built-in array functions - JavaScript Tutorial

- As we just saw with objects and how JavaScript provides several builtin functions to work with them more effectively, JavaScript also provides a good number of built-in array functions that we can use to work with arrays in a more intuitive way. Now, unlike with the object functions, which we called like object.keys or object.values, the functions that we use with arrays aren't called on a global array object, which does exist by the way, they're called from the arrays themselves. So if we had an array called numbers, we could say numbers dot, and then whatever array function we wanted to use, such as filter or map, we'll learn about these functions in just a moment. We saw push and pop briefly when we talked about arrays earlier in the course. These two functions are used to add and remove elements of an array respectively. So if we wanted to add another element onto the end of our numbers array, we could say numbers.push, and then a number or whatever other element we need to add onto the end. So that's the push function. The pop function, on the other hand, removes the last element from the array. We simply call this function without any arguments and it also returns the element that was removed so that we can assign that to a variable if we want. Now, it may bother you that the push and pop functions only operate on the last element of the array. What if we want to insert or remove an element somewhere in the middle or at the beginning of our array? Well, in order to do this, there's another array function called splice, and it may not be obvious from its name what splice does, splice isn't a word in my everyday vocabulary anyway. So let's take a look at the syntax, first. Splice takes three basic arguments. The first argument is the index we want splice to start at. The second argument is how many elements of the array starting at the index we specified we want to remove from the array and the third argument, the fourth argument, and so on, we can pass as many other arguments as we want, are elements that we want to insert at the index that we specified in the first argument. Now this might seem a bit confusing at first, so let's head over to the console and take a look at some examples. So let's start off by defining our numbers array. We'll say let numbers equals 1, 2, 3, 4. And let's say that we just want to remove one element from our array. In this case we'll remove three. So in that case what we'd say is numbers.splice, and we want to start at the array index two, since the number three is at index two in our array. And then as the second argument to splice, we pass one signifying that we only want to delete one element from the array. And in this case, since we don't want to add any elements, we can just leave off the third and fourth and all the other arguments from splice and call it with only two arguments. So if we hit enter, we see that splice returns an array with all of the elements that we just removed. And if we look at numbers again, we see that it now only contains one, two, and four, and that the third element three was removed. So that's how we remove elements from the middle of an array with splice. What about when we just want to add in an element without deleting any elements. Let's say that we want to insert the number 100 at the place where three was. Well, that would look something like this. We'd say numbers.splice, and then we'd start at index two and we'd say that we want to remove zero elements. And then for the extra items we want to insert, we could say a hundred as a third argument. If we hit enter now and then look at numbers again, we see that it successfully inserted the number 100 into the array. So what if we wanted to both remove elements and insert other elements at the same time? For example, what if we wanted to replace the numbers one and two at the beginning of our array with the strings one and two as words? Well, that would look something like this. We'd say numbers.splice, and we want to start at index zero. And then we want to delete two elements, the one and two from our array. And the extra elements that we want to insert into the array would be one as a string and two as a string. And if we hit enter and then look at numbers again, we can see that that's the result we got. And as I mentioned, when working with splice, the function itself returns an array containing all the elements that we removed. So in the last case of using splice, it just returned an array with the elements one and two that we removed from the beginning of our array. The next built-in array function we're going to look at is called index of. We use this function when we want to know what index a given value is at in an array. So for example, if we had an array of numbers and wanted to know what index the number five was at in the array, we'd say numbers.index of five. And it would tell us that the number five is found at index four in our array, at least in the example that we see here. And in the event that the element we're searching for isn't actually in the array, index of will return negative one. So index gave us the index of whatever element we're searching for, but there's another array function called find that works a little differently. Find instead of taking an element to search for as an argument, takes a function as an argument. And in JavaScript it is possible to pass functions as arguments to other functions. Now this function that we pass as an argument to find should take one argument and it should return a Boolean expression for this argument. Now what find will do is go through all the elements in the array and call this function on each element, and it'll return the first element in our array that this function returns true for. Let's look at an example of this to make it a little more clear. So first, just to make sure that our variables are clean, in the console, I'm going to run window.location.reload to wipe away all the variables. And let's say that we have an array of numbers again. So we'll say let numbers equals 2, 3, 4. I'll do a few more. 1, 2, 3, 4, 5, 6. So let's say that we have this array of numbers and we want to find the first number in the array that's greater than four. In this case, what we could say is numbers.find and then pass a function that takes one argument. We'll call that argument X, and returns whether or not that argument is greater than four. So we'll say return X is greater than four, and then we'll close the bracket in the parentheses and we see that it returns the first element in our array that's greater than four. In this case, that's just five. And with find, in the case that there isn't a single element in our array that the function returns true for, find will return undefined. So if we wanted to find the first element in our array that's greater than a hundred, instead of the first element that's greater than four, that would look something like this. We'd say numbers.find. And then for the function we'd say return X is greater than a hundred. And we see that it returns undefined since there's not a single element in our array that's greater than a hundred. The next built-in array function is called filter. Filter returns an array containing all the elements from our original array that the function we pass returns true for. So going back to our console and assuming that we have the numbers array from before, which is just the numbers one through six, let's look at the example of getting all the even numbers from our numbers array that would look something like this. We'd say numbers.filter, and then we'd define a function that returns whether or not a given element is even. So we'd say function X. And in JavaScript we can tell whether or not a number is even by whether or not the remainder when a number is divided by two is equal to zero. And this is done using something called the modulus operator, which exists in most other languages. So we would just say X modulus two, it's just the percentage sign by the way, and we check if that's equal to zero. So we're checking if the remainder when X is divided by two is equal to zero. And of course we want to say return and close the bracket and the parentheses. And we see that in this case it returns all of the even numbers from our original array. And something to note is that with filter and find, unlike with some of the other functions like push, pop, and splice, the array that we call finder filter on isn't actually mutated. It just returns a filtered version of the array. So if we look at numbers still after we've done the filtering, we see that the entire array is still intact. If we want to actually do something with the result, for example, if we wanted to do something with these even numbers from our array, we'd have to define a new variable to hold the result. So we could say let evens equals numbers.filter and hit enter. And now we have a variable called evens, which is an array containing all the even numbers. The next array function is map. Map is used when we want to transform all of the elements in an array in some predictable way. So for example, with our numbers array from before, which again is just the numbers one through six, we might want to say double all the numbers in our array and that would look something like this. We say numbers.map, and then just like with filter and find, we pass a function to map. The only difference is that instead of returning true or false for an element, we return the value we want each element to be transformed into. So in the case of doubling all the elements in an array, what we do is say return the element which is passed as an argument times two. And this would give us an array containing all of the original numbers doubled. And just like with filter, map doesn't actually mutate the array that it's called on, it just returns a copy. So MAP and all the functions that we talked about before it are pretty much just a rough sampling of some of the most common array functions. There are definitely a lot more of these functions that you can take a look at if you want, such as sort and reduce. And all of these functions are really useful when working with arrays since they let you work with arrays without the use of for loops, which can add some unnecessary clutter to our code.