Javascript: searching and looping Array
Tags: javascript, beginners, developer, codenewbie
Published: 2020-04-06 10:30:57

Hello everyone! I hope everyone is safe and being productive in this quarantine period properly. Investing time in building up knowledge now, Will help you in the latter time. 

Well, let's stop complaining about being stuck and let's invest this time in building ourselves.

We shall start building our javascript knowledge by looking at the most used data structure type in javascript **Array**. A most common definition of the array, "Array is a collection of similar types". But unlike other programming languages length of array and type of data in the Array are not fixed. Javascript arrays are high-level, list-like objects, indexed using numerical variables. 

Now, since we have some perspective of arrays its time to manipulate our array. As we know array is a list-like structure, we must be using arrays for storing multiple values. Now we do need to iterate through the values in the array.

A most common way used in all programming languages is to use **for loop**. Using **for loop** we iterate through each element in the loop.

In Javascript, Array Class has three built-in methods **filter**, **find**, and **forEach** which we can use for searching and looping through elements in Array. We will go through each of them individually.

Consider the example below, here we have a fruits array or basket of fruits (intentionally derived from my first blog😉). I have lots of fruits in my basket and I want to iterate through them

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y7d5o6gwf9kabi896tws.PNG)

### filter
[Array.filter(callback(currentValue [, index [, array]][, thisArg]))](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) function iterates through an array and returns a new array of values that passes the condition. Callback represents a function that checks for condition and returns a new array of values that fulfills condition.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/opdk4ukvewerbfzcwxx8.PNG)

Here, I am filtering fruits that are lexicographically greater than 'banana'. Since 'apple' (a is less than b) is lexicographically smaller than 'banana' we get all the fruits except 'apple'.

### find
[Array.find(callback(currentValue [, index [, array]][, thisArg]))](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) function is similar to filter function except that find function return a variable fulfilling condition. Callback represents a function that checks for condition and returns the first value from the array that fulfills the condition.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4dtrg0qaqp0ra1uu0ef2.PNG)

Here, I am using find function to filter fruits that are lexicographically greater than 'banana'. Since 'mango' (left to right) is the first element in the array that is lexicographically greater than 'banana' we get 'mango'.

### forEach
[Array.forEach(callback(currentValue [, index [, array]][, thisArg])](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) function is similar to foreach loop, iterate over all the values of array. The callback function specifies the operation to be applied once on each value of the array and returns an *undefined* value. Unlike **Array.map** and **Array.reduce** function forEach function always returns an undefined value and they are not *chainable*.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q66yqkf9fvju96bimxio.PNG)

Here, I am simply console logging each element in the array. The callback function returns an undefined value.

Now we have more ways to iterate through an array, each serving a different purpose. Hope this post was helpful!

Happy Coding!