Monday , 20 November 2017
Home / Programming / JavaScript / Array Methods – Advanced JavaScript Tutorial
Array Methods
Array Methods

Array Methods – Advanced JavaScript Tutorial

If you’ve seen my beginner JavaScript tutorials, then you already know about arrays. In this tutorial, we’ll discus a couple of handy array methods for iterating through arrays.

Iterative Methods

As you may know, the for in loop is a great way to loop through all the items in an array. However, arrays come with 5 methods for looping through the items in itself. These are called iterative methods. Let’s take a look at each one. First up is the every() method.

Clear your script and add this bit of code.

We first create an array filled with numbers and store it in a variable called numbers. Then, we access a method called every(). This method has 1 parameter which is an anonymous function that will run for each item in the array. This anonymous function should accept 3 parameters. The first parameter is the value. The second parameter is the index and the third parameter is the array itself.

We won’t be using the other 2 parameters as we just need the value. Next, we perform some checks if all the values in the array are greater than 6. If it is, then we return true. Else we return false. This function must return true or false. Nothing else.

After ALL elements in the array have been checked, then the every() method will compare the results. If the function returned true every time, then the every() method will end up returning true. Thus, our result will end up being true. If the function returns false even one time, then the result is set to false.

Lastly, we output the result onto the document. You should get false. In some cases, you won’t need every element to return true. In this case, you would use the some() method. Clear your script and add this bit of code.

This is the same code as last time, except we use the some() method instead of the every() method. They’re exactly the same when you write them. The only difference is the results you’ll get back. If we had an array with 100 items and used the some() method, then only 1 item has to return true for the overall result to be true. You should have true outputted onto the document.

There’s also a method for filtering data. This is called the filter() method. Clear your script and add this bit of code.

Instead of returning true, you can return values. All values returned are put inside a new array. After all the items have been iterated, you’ll be returned with a new filtered array. We store this new array in the result variable. Lastly, we output the result onto the document. The filter() method has the same parameters as the every() and some() methods.

Another method is the map() method. This method allows you to manipulate the elements in the array. Clear your script and add this bit of code.

We just add 20 to each item and then output the result. These 4 methods do not directly affect the original array when you return values. This is why we store the final result in a variable called result.

The 5th method available is the forEach() method. This method simply allows you to loop through each item in the array. You don’t have to return anything. Clear your script and add this bit of code.

We’re doing the same thing as last time. We simply add 20 to each item in the array. So, what’s the difference? The map() method returns a brand new array without affecting the original. The forEach() method directly affects the original array.

Reduction Methods

Reduction methods allow you to combine all elements inside the array into one value. There are 2 reduction methods. Clear your script and add this bit of code.

The first method is called the reduce() method. This method has 1 parameter which is the function that will run for each iteration. This anonymous function has 4 parameters. The first parameter is the final value that will be returned after each iteration. The second parameter is the element. The third parameter is the index and the fourth parameter is the array itself.

Inside our function, we just add the value of the element to the final value and return it. We then output the result.

The second reduction method is the reduceRight() method. It’s the same as the reduce() method except it loops through each item from the last item to the first item. Other than that, everything is exactly the same.

Conclusion

These methods only apply to arrays. If you need to loop through an object, you use the for in loop. For more information on arrays, then click here.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link