Array Methods You definitely need to know

What is an Array?

An array is a list like object in which we can store elements of any type. The length of array is not fixed. An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.We can perform various mutation and traversal operations on an array. To traverse we use integers as index and only integers can be used not strings.

Creating an array

Access an Array item using the index position

Array Methods :

There are various JavaScript array methods which can be very useful at times and all the methods in this article are chainable, meaning they can be used in combination with one another and they also don’t mutate data.

1.array.filter():

This method returns a new array with all of the elements of this array for which the provided filtering function returns true.

Syntax:

Example:

2. array.map():

This method returns a new array populated with the element in the calling array after manipulating them according to a provided function . The best part about this method is that it is an immutable method.

Syntax:

Example:

3. array.reduce():

This method will work like a magic when you want to reduce all the element in the array to a single value.It passes all the elements of the array through a single reducer function(given by you) and uses accumulator to give out a single value.The return value can be of any type(i.e. object, array, string, integer).

Syntax:

Example:

4. array.find() :

This method will give you the very first element from the provided array which will satisfy the passed testing function . Incase no such value is found then this will return Undefined.

Syntax:

Example:

5. array.some():

This method won’t the array instead it would just try to find a value for which the function returns a truthy value. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false.One of the best use cases would be checking for user privileges.

Syntax:

Example:

6. array.every():

This method makes sure whether each and every element of an array pass the test implemented by the provided function. It returns a Boolean value.

Syntax:

Example:

7. array.includes():

This method checks if the array contains a certain given value or not.Accordingly it returns a boolean value. Not to get confused with some() as instead of looking for a condition to pass, it looks if the array contains a specific value.

Syntax:

Example:

Old School For Loop V/S New Age Methods:

The biggest question of all time since methods like map(),filter() etc. were introduced was that why would someone choose them over our very favourite old school for loop. I got bumped to this question recently in an interview and I had no specific answer to it. So I went through few stackoverflow threads and few blogs written by people with wider bandwidth of knowledge regarding this matter.

Let’s try to summaries few points about the for loop:

  1. For loop will run through all the items in a array.
  2. It will execute the given function up until the condition is false.
  3. We don’t get any return result by default as they are not functions.
  4. We can break the loop anytime we want while using for loop.

Now let’s discuss few drawbacks of for loop:

  1. We will need extra variables just to iterate and keep counter.
  2. When we have complex logics to implement , with increasing loops within the loop it gets harder and harder to debug the code.
  3. With increasing complexity of the loops within a loop it’s hard sometimes to keep track of which loop is responsible for which executional task.
  4. The variables introduced by for loop have a function scope causing even more accidental errors.

Let’s take a look at some of the new age array methods’ advantages:

Immutability: These methods will give you a new array or object or any other type of data rather than modifying the old array which it is traversing.So this helps to achieve the great feature of immutability.When multiple actors act on the same piece of data, immutability helps keep code from stepping on each other’s toes.

Concurrency: Sometimes they might be slower but they are very good when it comes to concurrency point of view. This approach usually leads to fewer errors in code in multi-threaded or high concurrency apps.

Testing is easier: If you write unit tests for your code, you’ll find it simpler to test the functions you call with .map(), .reduce(), or .filter()All you have to do is provide inbound data for the function and expect a result to come out. Basically “what comes out if this is passed?”. Less manipulation, less beforeEach()s and afterEach()s. It’s straightforward, simple testing.

You can refer to this table to get a better summarisation :

Conclusion

There are a lot of ways of doing the same thing and there is no right or wrong to it. What we have today is better than what we had yesterday and we are constantly moving towards far better approaches. There might be cases where for loop works better than map or filter and the other way round so just understand your use case and try to write a more readable code which will increase your performance and save time for you and others.

If you found this article interesting or maybe if something cool pops in your head after reading this do let me know on LinkedIn or know more about me here.

I'm an Engineer who loves to play with code and give shape to my ideas.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store