Part 4 | A Piece of JavaScript Cake Series
A Beginner’s Guide | Javascript Array Methods
Introduction
Hi everybody, we started to talk about more advanced stuff in the last part, but I think you are still with me and waiting for the next articles to enhance your JS skills right? :)
Good. As we are going to hang together on the JavaScript journey, you are always free to ask for information that you need in the comments.
In this part, we are going to dive into JavaScript array methods.
Let’s begin.
What is an Array?
In Javascript array is a variable that can store different collections of elements. It can store any JavaScript data type elements. We can declare an array in the following ways:
let Students = []; // First Methodlet Students = new Array(); // Second Method
In most cases, the first method is preferred over the second method. The second method is not preferred while working with numbers. In the first method, we are initializing while declaring, but in the second method :
Accessing Array Elements
In JavaScript Array’s indexed from 0. We can access indexed elements like the example:
Array Methods
.push Method
.push method adds a new element to the end of the array. Then it will return the new length of the array.
.pop Method
.pop method removes the last element from a specified array and returns that removed element.
.shift Method
.shift method is very similar but this time removes the first element and returns that removed element as result.
.unshift Method
.unshift method is the opposite of the .pop method and adds new elements to the beginning of the specified array and then returns a new length.
.slice Method
When we need to get particular elements of an array, we are using the slice method. It takes to start and end index values and returns a shallow copy of the sliced portion of the array.
.toString Method
.toString method returns a string from the elements of the specified array. This method calls join() at the inside and joins string values together separated with commas.
.reverse Method
It reverses the specified array elements and returns the reference to the specified array.
The array of elements will be turned in the opposite direction where they are previously placed. The first element will be the last and the last element will be the first, other elements will also change their placement by the same pattern.
It does not copy the specified array, just reversed the reference of the array in place.
.length Method
It basically returns the elements count of the specified array.
.some Method
It’s a useful one to check at least one array element passes the specified test. It returns true if it's passed or if it's failed or an empty array it returns false.
.sort Method
It sorts the elements of an array in ascending order and returns the sorted array.
.concat Method
This method is used for joining two or more arrays together and returns a new array from the joined arrays.
.join Method
It returns a new, joined string of array elements separated by a specified separator.
.splice Method
One of the most used array elements is the splice method. It changes the contents of the original array by removing or replacing the elements, besides adding new elements in place of them. As it's modifying the original array, we can use the slice() method for scenarios in which we don't need modifying.
The splice method’s standard structure is the following:
splice(start, deleteCount, arrayElement, …., arrayElementN)start
The start is the index number to start modifying the array. If the given number is greater than the length of the array, the start value will be the length of the array.
If the starting index number is negative, it will start from the end of the array. A negative number means array.length — n.
If the starting value is -Infinity, it will begin to modify the array from 0.
deletecount
Deletecount is the number of elements that will be removed from the start value which we have mentioned before. If delecount value is equal to or larger than array.length — start, all the elements will be removed, however, if the value is negative or 0, no elements will be removed and a new element will be needed as a third parameter.
arrayElement
The final parameter is the element or elements to add to the array. It’s optional and if there is no third parameter, the splice method will only remove elements from the array.
.reduce Method
Reduce method is a bit complicated at first but it has a critical place, especially in understanding state management.
Reduce method’s structure as follows:
array.reduce(callback, initialValue);It takes an accumulator, a next value, and an optional initialValue. The initial value’s default is 0, which means the accumulator starting value is 0.
It starts to add values from the beginning of the array and continues by adding nextvalue to the previous value’s total, the accumulator every time it jumped to the next element of the array.
In the above example, at the beginning accumulator is 0 and the nextvalue is 23, and in the second element the accumulator is 23 and the next value is 56, and in the third element accumulator is 79 and the next value is 45, and in the fourth element accumulator is 124 and the nextvalue is the 89. So, the final value is 213.
.flat Method
The flat method creates a new array by flattening a nested array up to a specified depth value.
.map Method
If you need to iterate over the elements of the array and transform or modify each one then push the results into a new array, you should use the map method over a for a loop. So, in basic terms, it calls a function on each item in an array while iteration. It does not change the original array but creates a new array. The example structure is as follows:
Index and array parameters are optional and can be used to access the index of the currentValue and the original array.
.indexOf Method
IndexOf method searches a particular element in a given array. It is case-sensitive.
array.indexOf(element,index)element is the element to be searched
index is the optional value where will be the search starts.
.every Method
Every method is very similar to some method except to check every array element passes the specified test. It returns true if it's passed or if it's failed or an empty array it returns false.
.forEach Method
It acts similar to the map method and iterates over specified array elements and applies desired actions with them. Other than the map method returns a new array, the Foreach method does not return anything. Its structure is as follows:
array.forEach((currentValue, index, array)currentValue parameter is the value of the element.
index parameter is the index of the currentValue.
array parameter is the object being traversed.
If you need a loop that stops or breaks after running then Foreach is the wrong tool for you. It does not stop or break until throwing an exception.
.filter Method
Filter method iterates over given array elements and checks whether the specified condition is true or false, if evaluates true, then adds that element to the new array, other than it does not.
The structure of the filter method is as follows:
array.filter((currentValue, index, array)currentValue parameter is the value of the element.
index parameter is the index of the currentValue.
array parameter is the object being traversed.
.includes Method
Includes method checks the given array contains a specified string. It is case-sensitive and it returns a boolean value.
We can set a starting index for a searching process like this:
example.includes(“be”, 2); // It will only look beyond second index.As we have seen array methods, we stepped forward maybe the most important part of Javascript and a programming language. We use arrays in every programming language and they are really important for holding and manipulating large amounts of data.
In the next part, we are going to dive into Javascript Objects.
See you on the next one.
