Array Methods Part I

What can JavaScript do for you and your array’s?

Kevin Glasgow
Jun 5 · 7 min read

The answer is quite a bit actually. JavaScript has 30 plus built in methods for arrays that make our life a little easier as developers. Almost all of these built-in methods can help save us time by not only making arrays easier to navigate, but by simply using these methods to achieve our goals. Granted that there is such a built-in method to do so, otherwise you could need to do a little extra leg work but that is what we work towards. Solutions.

If you are brand new to arrays, I would suggest that you take a look at this article first to get yourself fully acquainted and comfortable before moving on. If you are ready to get started, this first part we will be taking a look at a handful of array methods that have always proven to be useful to myself. Then, in Part II, we will touch on the necessities of filter, for each, map, and reduce as no developer should be without these. But lets not get ahead of ourselves.

As stated above, in this section I will be reviewing a handful of methods that I personally find especially useful when working with arrays. This is not an extensive list as there are many more, which I implore you to explore when you are ready.

Concat()

This method gives us the ability to join multiple arrays together into one single array. Take for example we have an array of the current students in our class. We also have two other arrays, one holding the new students coming into the class and two holding the study abroad students that will be joining the class as well. Take a look at the example below to help gain a better understanding of how concat works.

Returns

Find()

We can use this method to, you guessed it, find the value we are looking for. It is crucial to note that it will only ‘find’ the first element that passes our test, should you be expecting multiple values on your return I am afraid you are out of luck with this one. Take for example we have an array containing the cars that our wealthy friend owns. We can use our find method to essentially find in this case what our Sunday and track day cars should be based on what they are. Take a look at the example below to help gain a better understanding of how find works.

Returns

Includes()

This method, which I see to be somewhat similar to find, will look through our array and return us true or false based upon our search parameter. Lets take for example we have an array that contains the fruits needed for us to create our delicious fruit platter. While shopping or should someone ask, we can simply use include to see if it is part of our dish. Take a look at the example below to help gain a better understanding of how includes works.

Returns

Pop()

We can use this method to remove the last item of our array. It is important to note that this will change or ‘mutate’ the array that it is being used on. Take for example Tennessee Knock Out is going on and we are down to our top 5 Enduro racers. There positions seem to be solidified so our array will remain unchanged after each pop or knock out. Take a look at the example below to help gain a better understanding of how pop works. I have also included console logs of the array of racers to also give you a better idea of how it mutates the original array.

Returns

Push()

This method on the other hand allows us to add new elements to the end of an existing array. It is important to note that your return will be the length of the array in numerical form, not the original array with the added items. To do that, which you will see, will be to return the original array after having ‘pushed’ your new elements on it. Take for example you have made a digital shopping list with the items that you wish to purchase. You let your significant other know before you go and request they add their needed items to the list. Those items can be ‘pushed’ onto the already defined list to make a complete list. Take a look at the example below to help gain a better understanding of how push works.

Returns

Shift()

This method, the exact opposite of pop actually, is used to remove the first item in our array. Again, like pop, this array method with mutate the original array which is why we will be returning the original array after each of our shift methods run. Take for example you are tasked with researching the top 5 best selling vehicles in the United States and were shocked to find that none of them were cars! We can use our shift method to grab first, second, and third place, but need to be sure to make our returns or in this case our console logs in the correct place to get the desired outcome. Take a look at the example below to get a better understanding of how shift works.

Returns

Slice()

We can use this method to select which parts of an array we would like to take and make a new array with. The only parameter required is where the ‘slice’ should happen but can be accompanied by a second which is where it should end. Take for example that we have a large list of riders, and we need to sort them based off of their skill levels. Expert riders or intermediate riders. Take a look at the example below to get a better understanding of how slice works.

Returns

Splice()

This method simply allows us to add or remove elements from an array. This method takes in three parameters as well. The first being the position in the array we would like our elements to be inserted, second the number of elements we would like to remove, and lastly what we want to add to our array. Take for example we have created a homework assignment for kindergarteners. They are given a section of the alphabet, but three letters happen to be missing. They will need to know its space, which we will put into index for them on our own, 0. Then if there will be any extra letters if they make additions and the answer to that is no, so zero will go there. And lastly what letters will need to be added, F, G, and H. Take a look at the example below to help get a better understanding how splice works.

Returns

I would like to thank you for reading along and hope that you have learned something new! Checkout part II here!

Keep an eye out for more articles the future!

If you would like to view a copy of these examples to play around with for yourself or just for reference, you can find the link for the GitHub Repo here.

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Kevin Glasgow

Written by

Full Stack Software Engineer | Passion for Frontend and Design | Dirt Rider & Snow Glider | www.linkedin.com/in/kevin-glasgow/

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.