Top 10 JavaScript Array Methods

Key Takeaways

hi and welcome the JavaScript mastery arrays are one of the most common things you're going to use as a JavaScript developer so today I'm going to go over 10 JavaScript array methods that are going to make your life so much easier and process of dealing with arrays faster we can begin by writing our example array that we are going to use throughout the video so we can simply write let's say numbers is equal to an array of 1 2 3 4 & 5 we can use this array to explain and explore all the different array methods that there are so first let's start with for each for each execute a provided function once for each array element and it helps you loop over arrays items so let's see how it looks and behaves we have an array of numbers and you can simply call for each on it then you provide a function to it this function is going to run for each array element here we are using simple error functions because they are simple clean and concise the parameter of the function is going to be a single element in this case it is going to be a number so this function is going to run 4 1 4 2 3 4 and 5 and here we output what are we going to do with that number so we can simply console that login and we are we are going to come to that log number and we can save it and run our function we are going to use node to execute our simple index tatty is and the output is just as we expected 1 2 3 4 & 5 secondly we are going to explore includes array method this method checks if array includes the item that is specified we can simply test it by typing our numbers array and then call concludes on it you need to pass a search element so let's say we are searching for 2 we are searching if data array includes the number 2 you can pass any element so any value it can be a string or it can be a number okay includes will return true if the array includes the item and it will return false if it doesn't okay so we can simply cons of that block the output and we can save it and run our index ajs and we can see that it returns here true and if we type in I'm number six which isn't included we can run it again and it will return false simple enough our third array method is filter filter creates a new array only including elements that pass the condition you provide it is really important to note that filter creates a new array so let's create it will create a new array called filtered numbers and it will be equal to numbers that filter filter the same as for each take scene and arrow function first part of the arrow function or the element and parameters are also the singular elements of that array so it is going to be a number and here goes the check for us passing the test or not so let's say we specify number smaller than 3 so filtered numbers will include all the numbers that pass this test and this test is numbers that are smaller than 3 so let's cons of the flog are filtered numbers and what do we expect to get we will run our index that is one more time and we get a completely new array of 1 and 2 and just for check we can't cancel that log our numbers and it should have stayed the same ok so this is a really nice way of using the data or using only some of the data from our original array without mutating it the 4 arrey method is map map creates a new array which results of calling a provided function on every element in the calling array the important part of this sentence is that it creates a new array it is really similar to for each but you can create a new array with it so let's create it new numbers will be equal to numbers that map and as in for each our map also takes in an error function and here goes a singular element so a number now here we can do anything with that number that is going to be included in our new array so we can simply try number plus 1 now we expect that every single one of our numbers is going to be incremented by one okay so let's console dot log our new numbers and we can run our index that is and we get 2 3 4 5 & 6 so we can do anything to our singular elements just in this function here using our that map and as in our filter method you can see that our numbers array so our original array stayed completely the same so it's 1 2 3 4 & 5 it's really important to note that you can do anything with our new array but you can still keep our original array our next array method is going to be reduced the reduced method applies a function against an accumulator and each element in the array from left to right to reduce it to a single value so now for the first time we aren't going to get an array from our array we are going to get a single value some may think that some may think that reduces the hardest method to grasp or to have some knowledge of but it is not that hard we are going to explain it right now so we are not going to get a new array but we are going to get a single so we can set it up and call it some because we are going to add all of these numbers together so some will be equal to numbers that reduce and as in all our other array methods we will pass in an error function but now for the first time our arrow function will have two parameters first one is called accumulator and the second is current value and since we want to add them together we are going to simply type accumulator + current value okay so what is this basically accumulator is a variable it is something at the beginning it is equal to zero and later we do something to accumulator for each round of our array in this example we add our current value to the accumulator each time so current value is nothing more than a number and we can write here number so basically it's the same thing we had to all of our other array methods so far first it is going to be 1 then it is going to be 2 3 4 and so on so for the first round of our numbers that reduce we are going to have 0 and then 1 then our number will be added to our accumulator and then accumulator will be equal to 1 afterwards we will run it again and then accumulator will be equal to 1 but we'll add +2 and it is going to be equal to 3 and so on so not a dock match let's see it in action we are going to consume that log the sum and we are going to run our index ljs and as you can see we get 15 so 1 plus 3 is 3 what's true is 6 6 plus 4 is 10 and we get 15 after we add our last 5 so as you can see it is not that hard to understand our reduce function it has an accumulator and a current value accumulator is nothing more one specific value that something is being done with every single round of our reduced function for each of our array parameters simple as that sixth array method is some this method checks if atleast one of the arrays items as the condition if the condition is passed it returns true otherwise it returns false so let's see some in action first we use our array and then call some on it and as always we have an error function inside here is the condition and here is the number as always the condition let's say will be number is less than tree so if only one of these elements only one passes the condition this whole function is going to return true and we can console it log to see it so it is cons of that block and then we run our index and it returns true because both one and two return true okay so let's say it for one and it returns false because none of the elements pass the condition okay our seventh ray method is really similar but also really different it is every this method checks if all arrays items ask the condition if passed it they return true otherwise it returns false okay so we do the same things we call numbers and then every we pass in an error function here we have a singular number and here we have a condition we can do the same condition as we did before we can call our console dot log again and here this is the difference in every every single of these elements need to pass the condition so our next array method is sort this method is used to arrange or sort arrays items either in ascending or descending order so let's see it in action we'll create a new array called sorted array and it is also going to be equal to numbers that sort and it will have an arrow function now in here you put the options on how to solve the array and in here you have the parameters going from left to right so a and B they can be called whatever so it is going from left to right one two three four and five and it is comparing numbers okay so if we just leave it as this and we console dot log our sorted array and run our index a AAS we get one two three four five and six but it was already sold so let's rise three four five and two okay we run it again and we don't get it sorted now here are the options for the sole so let's say a is bigger than B okay if we run it again we should get one two three four and five as you can see it is sold if you want a descending order you simply swap the operation sign and you run it again and you get five four three two and one with sort you can do so much more than simply sort the numbers for some order or sort the letters in alphabetical order you can do so much more but this is outside of the scope of this video so we may cover it sometime soon okay now similarly you have reverse so as you can see here we got five four three two and one and you can simply do let's say let's return this to our original array four and five and we can also call our numbers that reverse and that will also return our array but there are a few differences so let's cancel that log and run it as you can see here we get one two three four and five and that is because of one big takeaway so although we are placing our news newly sorted array in a new variable sorted array numbers that sort is actually mutating our real array called numbers so numbers will also be 5 4 3 2 1 and then we will also return it to 1 2 3 and 4 we can simply remove our sort and sorted array and then call our reverse to see the real result so we get 5 4 3 2 & 1 our last array method is compat when cat is used to merge two or more arrays this method does not change the existing arrays but instead it returns a new array so to see it in action we first need to create our second array and let's call it numbers 2 and it will have 5 6 7 8 9 and 10 ok now we simply type numbers and then call concat with second array or second and turn as parameters okay we just put numbers 2 and we simply create a new array that will be equal to the result of 2 arrays added together ok so let's type that to the console and run our index address and as you can see we get 1 array from numbers 1 to 10 and if we console our numbers array and our numbers to array we'll see that they are actually unchanged so concat is really awesome with dealing with two or more arrays that's it for this video this was only a beginner to intermediate introduction to array methods if you'd like to see something more complex let me know in the down below subscribe if you like the video and stay tuned for more [Music]