Little Brief about JavaScript Array
Array is a data structure consisting of a collection of elements, each identified by index. It is the simplest data structure where each data element can be accessed directly by only using its index number.
Array Traverse:
If we are asked to traverse an array, we can easily execute a loop to traverse it. Touch each element of an array by running a loop and complete required operation is called Traverse.
Imperative Traverse -
We can print out all the elements of the “arr” array like this. We can also sum all the elements of the array & any other operation by the same way using array’s elements.
This is called Imperative Traversing. Because we have told where the loop will start, where it will stop, and even how to increment. I have also told what the operation will be. So it is an Imperative Traversing.
Declarative Traverse —
Usually we don’t need to work in JavaScript by running for loops. Since JavaScript is a high-level language, it has various methods, which we can traverse in a declarative way. There is a nice method called forEach.
Now running this program will show that “Hello World” will be printed 5 times. Because “arr” have 5 elements. The function of forEach is to run the loop as many times as there are elements. forEach will pass a callback function as an argument.
forEach calls that function in somehow. This callback function has something in the form of parameters. All of them are stored in a data structure called arguments.
The forEach function has 3 parameters (value, index, array) as arguments.
value — store the elements of the array
index — store the index of elements
array — store the whole array
Update —
There is no need to do the update in the imperative way. Update is very simple. If we know the index of an array then we can easily update its data.
If the index is not known then the index must be extracted first. Then it can be updated. such as:
It can be updated without retrieving the index. In that case we have to use find method. such as:
Delete —
Now we will see how to delete a data from an array. Here we will delete using two methods. splice and filter. The difference between them is that splice method is mutable and filter is immutable. Let’s see how:
Here it is seen that the splice method has directly deleted the data from the original array. That means there is a mutation here. Now see with filter method:
Here is the original array as it was. But after filtering the filter method returns a new array which doesn’t contain the one I wanted to delete. That means the filter method is immutable.
Map —
Map usually creates a clone version of the original array. If the original array contains 10 data then the new array will also contain 10 data. Now that data can be same or different. such as:
It will output the string version of all numbers. One thing to keep in mind is that the length of the array will not change after mapping. Only the data will change. The number of data will remain the same.
Filter —
The function of filter is to filter the data we want from an array. Suppose we have an array.
We want to remove all falsy values from here and only take truthy values. In that case we have to use filter method.
In this case all truthy values will be returned. But there will be some situation when I want truthy value but can’t return two before v !! I will get truthy value only if I install it.
Reduce —
Reduce is so powerful that it is unimaginable. If you understand reduce properly, you can work with reduce instead of working with maps and filters. Map returns us a new array of the same length. Filter Returns the array of filtered values. It may or may not be the same length as the original array. But no one knows what return will reduce. Only we will know. Here it can return any possible value like string, number, boolean etc.
Let’s take a look at the structure of reduce:
As the first parameter we have given acc (accumulator / previous value) and as the second value we have given cur (current value). After acc, cur we can give index if we want, whole array if we want but we don’t need that. The advantage of reduce method is that here we can provide an initial value. ‘’ can be replaced by empty object {}, empty array [], null anything. It depends on what we want. This means that currently the value of acc is what I will give as the initializer. At the end of the day we will return our acc. Whatever we do we will return acc in the reduce method. Now we want const numbers = [1, 2, 3, 4, false, ‘’, NaN, 5, 6]; From this we return “1234falseNaN56”. To do that we will take help of reduce method.
What have we done here? We assume the value of acc is ‘’. Then I added toString of cur to it. And we put our result in a variable. Then when the output showed we got what we wanted.
Now we want to take only truthy values from this array. Do not take any falsy value. In that case we can put a condition.
So we understand the power of reduce somewhat. It’s a kind of power. The reduce method has more power. Like now we don’t want acc as string. We want an array of all truthy values. That can also be done with reduce.
That’s all for today. Hope it was a useful article on Array.