5.4 Working With Arrays

Hi, folks. In this lesson, we're going to look at the different properties and methods that we'll use most frequently when working with arrays. Just like strings and numbers, arrays have a wide range of different properties and methods that allow us to manipulate them, and work with the items they contain in different ways. First of all, let's just add a basic array that we can work with throughout this lesson. Just like strings, arrays really only have one property that we'll ever use, the length property. Which tells us how many items there are in your array. For our test array, the length is three. Don't forget that arrays have zero based indexes. So, let's move on to look at the methods which arrays have, of which there are many. If we want to add a new item to an array, we can use the push method. In this case, our array will now contain four items. The items that we want added to the array are passed to the push method as arguments. And we can add as many arguments as we need. The method returns the new length of the array, and the new items are added to the end of the array. If we want to add a new item to the start of the array instead, we need to use the unshift method. Again, we can parse multiple arguments to the unshift() method if we want to insert multiple items. And again, this method returns the new length of the array. Lets just lock the array to the console once more, so that we can see how it has changed As you can see, it now contains five items. If we want to remove the last item from the array, we can use the pop method. This will remove the last item from the array, and return the item that gets removed. We can also remove items from the start of the array if we need to, using the shift method. Once again this returns the item that gets removed. The only difference is that the item is removed from the beginning of the array rather than the end. Now, the array is back to how it was at the beginning of the lesson. If we want to remove items from within the array rather than from the end, or the start of the array, and optionally insert new elements we can use the splice method. The splice method can take a number of different arguments. In this example, we've only provided the first argument. When we only provide the first argument, all items, from the index of the argument that we provide right to the end of the array, will be removed. So, passing zero to the splice method should result in all of the items from the array being removed. So, at this point, the array is now empty as you can see from the last console log. The second argument, if we do supply it, is the number of existing items that we want to remove. So, let's just change the previous expression, and instead of removing all of the items from the array, let's just remove two of them. This just leaves us with the final item in the array, the string three. Following the second argument to the splice method, we can insert new items into the array by passing them as additional arguments. So, let's use the splice method to replace all of the items within our test array. So, we'll provide three as the second argument, to say that we want to remove three items. And the array at this point just contains three items, so that will empty the array completely. And let's add three new items to the array. So, now all of the original items from the original array have been replaced. We can reverse the order of the items in the array if we want. We can do this using the reverse method. The reverse method is another simple method that doesn't require any arguments. All of the methods that we've looked at so far changed the underlying array permanently, and are therefore referred to as mutator methods. There's one more that we haven't covered and that's the sort method. Let's take a look at this one next. The sort method sorts the items in an array. If we use the method without passing an argument, it uses it's default lexographic sorts. This sorts in alphabetical order, but it uses a Unicode, so it might not always work as we expect. In this case, because we're working with three lowercase letters, it does get sorted as we would expect. Let's just go back and make one of the letters uppercase. In this case, the sorting doesn't quite work in the way we would expect. And this is because, as I mentioned, it uses Unicode to sort. Uppercase letters in Unicode have a lower code number than lowercase letters do. And so, when we use the default sort, the uppercase C gets sorted to the first item in the array. That's probably not what we would want, or expect. Sorting with numbers can be just as confusing. What order do you think the items in this array are going to be sorted into? Let's check and see. That is probably completely backwards from what we were expecting. To fix this we need to perform a custom sort. To do this, we can pass a comparison function to the sort method, which encapsulate the sorting logic that we want to use. What we do inside the comparator will depend on the type of values that we want to sort. The comparator function will be passed to values from the array each time it is invoked. Conventionally we call these A and B. To sort simple numbers we can just subtract B from A. Let's go back to the browser, now and take a look. As we can see this has sorted the numbers into probably the order that we would expect the defaults to sort them into. So, the comparative function needs to return a negative number if A is less than B, zero if the two values are equal. Or a positive number if B is greater than A. That's why subtracting b from a works and gives us the sort that we were expecting, from smallest to highest. Sorting strings with a custom sort function is slightly more complex. First of all, we'll need to put all of the strings that we want to sort into lowercase. So, now we need to return either minus one, zero, or one, depending on whether B is less than A, equal, or greater than. So, that should be all the sorting logic that we need for this example. Let's go back to the browser and see if it works. So, now we can see that, regardless of the fact whether C is uppercase, or lowercase, it still gets sorted into what we would probably expect to be the correct position. So, as well as the mutator methods that we've looked at so far, there are also a range of accessor methods. These methods don't alter the underlying array that they are operating on, but instead return some subset of the items in the array as a new array. For example, when we looked at strings earlier in the section, we saw that there is a way for us to turn a string into an array. Arrays have a method that turns an array into a string. The join method. So, we can see that the items in the original array, ["C", "a", "b"], have been turned into a single string. The join method accepts a single argument, and that is the character that we'd like to use to join the items in the array. In this case we specify no character and we saw that the individual letters are just joined together. We can change this if we like to use a different separated character. We can change this if we like to use a a different joining character. And now, the pipe character is used to join them. If we want to test whether a particular item exists inside an array, we can use the index of, or last index of methods. These methods work in the same way that they do with strings, and return either the index of the item, if is in the array, or minus one if it isn't. The index of method checks from the start of the array, while the last index of method checks from the end of the array. Only the index for the first, or last item is returned. So, it can't be used to check if the array contains duplicates. So, in the last log there we can see that B is the third item in the array and that's why it has an index of two. Like strings, arrays also have a slice method, and this returns a new array consisting of the items between two specified indexes. So, the argument that we pass to the slice method is the index that we want to begin slicing from. In this example, we passed one. And so, we start slicing from the second item. And because, we didn't provide a second argument, the method will slice all the way to the end of the array. If we do provide a second argument, that is the index of the item that we want to stop slicing at. So, now the returned array just contains a single item. If the second item is negative number, then slice will start slicing the array from the end of the array rather than the beginning. So, in this lesson we started by looking at the length property, which tells us how many items there are in an array. We then moved on to look at the mutator methods, which included how to add and remove items from the start, or end of the array, and how to insert new items at either the start, or the end of the array. We also saw how we can add, or remove items from within the array using the splice method. And we saw how to reverse, or sort the items in an array using the reverse, or sort methods respectively. We also looked at some of the accessor methods that are available, including the joined method for converting an array to a string. The indexOf or lastIndexOf method for finding an item within the array. And this slice method though returning a new array containing some, or all of the items in the original array. In the next lesson we're going to continue looking at some of the many array methods. Thanks for watching.