JavaScript Arrays Simplified in 3 Sections
Tags: javascript, webdev, codenewbie, programming
Published: 2021-07-10 19:31:28

An Array is a data type in JavaScript used for storing a collection of like data. In our daily activities, we always find ourselves grouping things that are alike together, sometimes we even find ourselves being grouped with people that we share a common function or attribute.

An array is how we can represent this group together in javascript. Different names can be used to mean an array, some are collection, group, list, etc. But with the names, I believe you can get an idea of what Javascript array is all about.

Say we have a list (array, group, collection) of all the student's names of a class, we could represent this in JavaScript thus

```js
const studentNames = [
  'Dwayne Johnson',
  'Lionel Messi',
  'Kevin Hart',
  'Elon Musk',
  'Lebron James',
];
```

The array `studentNames` represents the names of students in a class. Each student's name can be referred to as an item or element or member.

To access a member of an array we use the bracket notation i.e

```js
studentNames[0]; // returns 'Dwayne Johnson
```

Javascript array indexes start with 0, in other words, the first item is 0 and the second item is 1.

## Modifying Array Items

We have looked at declaring arrays, and accessing them individually, now let's talk about making changes to an array. In JavaScript, we can add, remove and change items in an array. JavaScript provides a lot of methods to do these.

It is important to note that these methods or ways of modifying array items listed in this section will actually change the array. In other words, these guys will actually make changes to the array and the effects of these changes will be seen on the array even after the use of these methods. If you don't understand this now, never mind you'll get the full picture as you continue.

### Adding Items to an array

#### Using the `push()` method

With the JavaScript array `push()` method, you can append items to the end of an array.

```js
const numbers = [1, 2, 3, 4, 5];
numbers.push(6);
console.log(numbers); // result: [1, 2, 3, 4, 5, 6]
```

Easy right! The `push()` method can take more than one argument, so you can add multiple items at a go. You should also try to not add more than three values as an argument as this would not be a good convention for readability.

But what if you have 10 items to add to the array. This is what you should do, make an array containing these new items to add and pass the array as an argument for the `push()` method using the spread operator syntax (`...`).

```js
const numbers = [1, 2, 3, 4, 5];
const numbersToAppend = [6, 7, 8, 9, 10];
numbers.push(...numbersToAppend);
console.log(numbers); // result: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
```

Not using the spread operator, in this case, will lead to a multidimensional array, which we don't want.


------------
Hey, since you are reading this, i think you might be interested in [20+ Places to Learn Programming for Free](https://webdeverguide.com/20-places-to-learn-programming-for-free "20+ Places to Learn Programming for Free")

------------


#### Using the `unshift()` method

With the JavaScript array `unshift()` method, you can add items to the beginning of an array.

```js
const numbers = [1, 2, 3, 4, 5];
numbers.unshift(0);
console.log(numbers); // result: [0, 1, 2, 3, 4, 5]
```

Easy right! Just like the `push()` method, the ...unshift method can take more than one argument, so we can add multiple items. Do not also forget to use an array along with a spread operator to add multiple items for the sake of readability.

#### Using the `splice()` method

We've looked at two methods that can only append items to the end and beginning of an array respectively, what if I want to add items anywhere else? Well, JavaScript says not to worry, the splice method will do just that.

With the JavaScript array `splice()` method, you can add items at any position in an array. The `splice()` method can take multiple arguments, but there are three arguments that are required to add an item.

```js
const languages = ['Python', 'Javascript', 'Java', 'Go'];
languages.splice(2, 0, 'PHP');
console.log(languages); // result: ['Python', 'Javascript', 'PHP', 'Java', 'Go']
```

The first parameter defines the position(index) where new items should be added.
The second parameter defines the number of items to be removed from that array - we don't want to remove so we can leave this at 0.
The last parameter and every other parameter after it defines the item(s) to be added to the specified position.

```js
const languages = ['Python', 'Javascript', 'Java', 'Go'];
languages.splice(2, 0, 'PHP', 'C++', 'C#');
console.log(languages); // result: ['Python', 'Javascript', 'PHP', 'C++', 'C#', Java', 'Go']
```

So with the splice method, we can add multiple items at any position we want. Again if you intend to add more than one item I'd suggest you make an array and use the spread operator to do the needful. As explained in the `push()` method above.

```js
const numbers = [1, 2, 3, 4, 5];
const numbersToAppend = [6, 7, 8, 9, 10];
numbers.splice(5, 0, ...numbersToAppend);
console.log(numbers); // result: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
```

Imagine writing it like this

```js
const numbers = [1, 2, 3, 4, 5];
numbers.splice(5, 0, 6, 7, 8, 9, 10);
console.log(numbers); // result: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
```

If you should take a break from coding and when you come back to this code above. Trust me, you would be as confused as someone who knows nothing about coding :). Because maybe by then you've probably forgotten what the first parameter in the splice method does. You see.

------------
Hey there again. Since you studying Javascript, I figured this might be useful, [The roadmap to become a Web Developer in 2021](https://webdeverguide.com/how-to-become-a-web-developer-in-2021 "How To Become a Web Developer in 2021").

------------

#### Using the Array accessors.

I am sure you are curious to know what array accessors are, well I hate to break it to you, but it doesn't mean anything special. I made it up.

The reason I called it array accessors is because we will use the usual way of accessing items in an array to add items.

```js
const numbers = [1, 2, 3, 4, 5];
numbers[7] = 8;
console.log(numbers); // result: [1, 2, 3, 4, 5, undefined, undefined, 8]
```

Using the example above can lead to undefined holes in our arrays which we don't want. But to add items to the end of an array at the same time avoid those undefined holes, we need to get the length (number of items in the array) of the array.

Because JavaScript array is zero indexes, it means the length of the array is always one step ahead of the index of the last item. This will enable us to add items to the end without altering the last item of the array. So to add another item to the end of an array we say

```js
const numbers = [1, 2, 3, 4, 5];
numbers[numbers.length] = 6;
console.log(numbers); // result: [1, 2, 3, 4, 5, 6]
```

How this works is simple, we get the length of the array using `numbers.length`, then we set it as an index for a new item.

With this method, we can only add items one at a time. But we can add multiple items by creating an array for these items to be added, and looping them. Like this

```js
const numbers = [1, 2, 3, 4, 5];
const numbersToAppend = [6, 7, 8, 9, 10];
numbersToAppend.forEach((number) => {
  numbers[numbers.length] = number;
});
console.log(numbers); // result: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
```

We will talk about loops in the latter part of this article.

### Removing Items from an array

The `delete` keyword which would have been my favorite is the one you should never use.

#### Using the `pop()` method

As the `push()` method is to add items to the end of an array so is the `pop()` method to removing an item from the end of an array.

The JavaScript array method `pop()` will remove the last item in an array. It usually returns the removed item as its value.

```js
const numbers = [1, 2, 3, 4, 5];
const removedNum = numbers.pop();
console.log(numbers); // result: [1, 2, 3, 4]
console.log(removedNum); // result: 5
```

This method doesn't take any parameters.

#### Using the `shift()` method.

The JavaScript array method `shift()` will remove the first item in an array. It usually returns the removed item as its value.
This method doesn't take any parameters.

```js
const numbers = [1, 2, 3, 4, 5];
const removedNum = numbers.shift();
console.log(numbers); // result: [2, 3, 4, 5]
console.log(removedNum); // result: 1
```

#### Using the `splice()` method

Just as we can add items with this method, we can also remove items. Removing items with this method requires two arguments I.e

```js
const numbers = [1, 2, 3, 4, 5];
numbers.splice(4, 1);
console.log(numbers); // result: [1, 2, 3, 4]
```

- The first parameter indicates the position(index) where the items should be removed from.
- The last parameter indicates the number of items to be removed.
  The `splice()` method will return an array of the removed item(s).

```js
const numbers = [1, 2, 3, 4, 5];
const removedNums = numbers.splice(3, 2);
console.log(numbers); // result: [1, 2, 3]
console.log(removedNums); // result: [4, 5]
```

So this is one of the ways to remove multiple items from an array, there are others, which we will make mention of next.

#### Using the Length property

With the length property, we can remove as many items as we want from the end of an array.

```js
const numbers = [1, 2, 3, 4, 5];
numbers.length = numbers.length - 1;
console.log(numbers); // result: [1, 2, 3, 4]
```

The 1 indicates the number of items to be removed from the end of the array. Now the way this works is this. Normally with the length property, we can redefine a length for an array and the array will change e.g

```js
const studentNames = [
  'Dwayne Johnson',
  'Lionel Messi',
  'Kevin Hart',
  'Elon Musk',
  'Lebron James',
];
studentNames.length = 3;
console.log(studentNames); // result: ['Dwayne Johnson', 'Lionel Messi', 'Kevin Hart']
```

Now recall that we said the length of an array is one higher than the index of the last item of that array, so we will redefine the length of the array to the index of the last item by removing one from the length of the array. When we remove two, we are saying we want to remove the last two items (by saying the new length of the array should be equal to the current length - 2).


------------

Are you preparing for an interview? Here is a [Codecademy course](https://www.pntrs.com/t/SENKTE5HT05DSEpMTk9JQ0hHSUtOTg "Codecademy course") to help you practice **Technical interview questions** in Javascript

------------


### Replacing Items in an Array

How would we change or replace items in an array? There are two ways that we can do this

#### Using the Array Accessors.

Simply access the item you which to change by using its index i.e

```js
const numbers = [1, 2, 3, 4, 5];
numbers[2] = 25;
console.log(numbers); // result: [1, 2, 25, 4, 5]
```

One of the ways you can use to get the index of an item using the item is the [`indexOf()` method.](https://www.w3schools.com/jsref/jsref_indexof.asp)

```js
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.indexOf(3)); // result: 2
```

With the indexOf method, you don't need to know the index of the item before using it elsewhere. You simply need to know the item.

#### Using the `splice()` method.

This guy is just everywhere.

Apart from being able to add and remove with the `splice()` method, we can also replace or change items in an array with it. Here is how

```js
const numbers = [1, 2, 3, 4, 5];
numbers.splice(3, 1, 20); // replacing index 3 (which is 4) with 20
console.log(numbers); // result: [1, 2, 3, 20, 5]
```

- The first parameter is the position(index) of the item to change or replace.
- The second is the number of items we intend to change from the position already specified in the first parameter.
- The third and every other parameter define the items we intend to change the removed items with.

Here we have an array of 5 sorted numbers with a difference of one, if want to replace 4 and 5 with 7 and 8, this is what we will do

```js
const numbers = [1, 2, 3, 4, 5];
numbers.splice(3, 2, 7, 8);
console.log(numbers); // result: [1, 2, 3, 7, 8]
```

As we have said this can get a little confusing with numbers as the items in the array sometimes, so you could say

```js
const numbers = [1, 2, 3, 4, 5];
const numbersToAppend = [7, 8];
numbers.splice(3, 2, ...numbersToAppend);
console.log(numbers); // result: [1, 2, 3, 7, 8]
```

So what this means is that we can change multiple items at a go with this method. Awesome.

Alright so these are great ways to modify an array, so you've learned to replace or change an array, add multiple items and single items to an array, and removing single items and multiple items from an array. That's a lot. Kudos.

### Copying an Array

Now there is a common method that is used in arrays, it doesn't actually change the array but it slices a part of an array to form its own array. Like borrowing, only that it's not gonna payback.

```js
const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.slice(1, 4);
console.log(newNumbers); // result: [2, 3, 4]
console.log(numbers); // result: [1, 2, 3, 4, 5]
```

Another word you can use for it is stealing, or more interestingly **copying**. So with this method, we can copy an array, before I explain that, let us first look and understand the syntax.

The slice method takes two arguments, the first being the start position(index) and the last being the end position(index). The end position is not included, while the first is included.

```js
const cars = ['Ford', 'BMW', 'Mercedes', 'Honda'];
const expensiveCars = cars.slice(1, 3);
console.log(expensiveCars); // result: ['BMW', 'Mercedes']
console.log(cars); // result: ['Ford', 'BMW', 'Mercedes', 'Honda']
```

We can use this method to copy an array into another array without referencing.

```js
const cars = ['Ford', 'BMW', 'Mercedes', 'Honda'];
const clonedCars = cars.slice(0);
// changes from this line on the cars array will not affect the clonedCars array e.g
cars.push('Toyota');
console.log(clonedCars); // result: ['Ford', 'BMW', 'Mercedes', 'Honda']
console.log(cars); // result: ['Ford', 'BMW', 'Mercedes', 'Honda', 'Toyota']
```

What this means is that changes to the `cars` array after the `slice()` method has been used, will not affect the `clonedCars` array.

This is not the case for this

```js
const cars = ['Ford', 'BMW', 'Mercedes', 'Honda'];
const clonedCars = cars;
// changes from this line on the cars array will affect the clonedCars array and vice versa e.g
cars.push('Toyota');
console.log(clonedCars); // result: ['Ford', 'BMW', 'Mercedes', 'Honda', 'Toyota']
console.log(cars); // result: ['Ford', 'BMW', 'Mercedes', 'Honda', 'Toyota']
```

You see. There is one other way to copy arrays without referencing, by using the spread operator

```js
const cars = ['Ford', 'BMW', 'Mercedes', 'Honda'];
const clonedCars = [...cars];
// changes from this line on the cars array will not affect the clonedCars array e.g
cars.push('Toyota');
console.log(clonedCars); // result: ['Ford', 'BMW', 'Mercedes', 'Honda']
console.log(cars); // result: ['Ford', 'BMW', 'Mercedes', 'Honda', 'Toyota']
```

Just like how the splice method works.

## Sorting Arrays

Sorting an array in JavaScript is very easy. We make use of the `sort()` method to sort an array. Sorting an array can be done alphabetically or numerically depending on the items on the array.

### Sort Arrays Alphabetically.

Say we have a list of names, and we want to sort them alphabetically, we can use the `sort()` method on that list to sort it alphabetically I.e A - Z.

```js
const names = ['John', 'Sarah', 'Micheal', 'Brad', 'Faith', 'Anthony'];
names.sort();
console.log(names); // result: [ 'Anthony', 'Brad', 'Faith', 'John', 'Micheal', 'Sarah' ]
```

Note: The `sort` method changes the original array to the sorted array just as it returns the sorted array as its value

```js
const names = ['John', 'Sarah', 'Micheal', 'Brad', 'Faith', 'Anthony'];
const sortedNames = names.sort();
console.log(sortedNames); // result: [ 'Anthony', 'Brad', 'Faith', 'John', 'Micheal', 'Sarah' ]
console.log(names); // result: [ 'Anthony', 'Brad', 'Faith', 'John', 'Micheal', 'Sarah' ]
```

If you don't want to change the original array, then you can make a copy of that array and sort the cloned array. That means copying without referencing. This has been explained previously in this article.

```js
const names = ['John', 'Sarah', 'Micheal', 'Brad', 'Faith', 'Anthony'];
const sortedNames = [...names];
sortedNames.sort();
console.log(sortedNames); // result: [ 'Anthony', 'Brad', 'Faith', 'John', 'Micheal', 'Sarah' ]
console.log(names); // result: [ 'John', 'Sarah', 'Micheal', 'Brad', 'Faith', 'Anthony' ]
```

### Sort Arrays Numerically

A group of numbers can also be sorted in JavaScript as in ascending or descending order.

#### Sorting Numbers In Ascending Order

Ascending would mean from 1 to greater than 1 (1, 2, 3, 4, n > 1). JavaScript sorts numbers by using a compare function. It's as easy as comparing two numbers to determine who is bigger.

Here is a metaphor, say you're a teacher how would you sort your students in ascending order? You simply look at the first and say hold up, look at the second compare with the first; whoever is shorter is sent to the beginning. You will do this continually till you get to the last person.

**How exactly does JavaScript do it?**

The compare function compares two numbers and usually return negative, zero or positive value.

```js
function compare(a, b) {
  return a - b;
} // ascending
```

If we passed 5 and 10 respectively as arguments for the `compare` function, it will return a negative value. And so because it returned a negative value we can say, the second (10) is greater than the first (5).

If we inverse the order and pass 10 and 5 respectively as the arguments of the `compare` function, it will return a positive value indicating the first (10) is greater than the last (5).

If the values are equal, it will return zero, indicating equality.

The `compare` function is passed as a callback function to the `sort()` method which in turn sends values to the `compare` function, and then does the arrangement based on the returned values from the function (negative, zero, or positive).

```js
const numbers = [2, 4, 1, 90, 3, 9, 5, 101];
function compare(a, b) {
  return a - b;
} // ascending
numbers.sort(compare);
console.log(numbers); // result: [ 1, 2, 3, 4, 5, 9, 90, 101 ]
```

Using the arrow function makes it more readable

```js
const numbers = [2, 4, 1, 90, 3, 9, 5, 101];
numbers.sort((a, b) => a - b);
console.log(numbers); // result: [ 1, 2, 3, 4, 5, 9, 90, 101 ]
```

#### Sort Numbers in Descending order

Same as ascending order, only that the compare function will change. This time the first value needs to be subtracted from the second value to return negative, zero, or positive values.

```js
const numbers = [2, 4, 1, 90, 3, 9, 5, 101];
numbers.sort((a, b) => b - a); // descending
console.log(numbers); // result: [ 101, 90, 9, 5, 4, 3, 2, 1 ]
```

**Can we sort numbers in strings?**

While this is not recommended, it is worthy of note that JavaScript is smart enough to sort numbers in strings in ascending or descending order. As long as these numbers are not mixed with other characters. Other characters except for the period character (.).

```js
const numbers = ['2.22', '4', '1.90', '90', '3', '9', '5', '10.1'];
numbers.sort((a, b) => b - a); // descending
console.log(numbers); // result: [ '90', '10.1', '9', '5', '4', '3', '2.22', '1.90' ]
```

Using other characters with it will provide you the outcome you are not expecting. When mixed with other characters, 9 will be greater than 200 because 9 is greater than 2. So JavaScript will be confused.

```js
const numbers = ['2.22', '4', '10Q', '90L', '3P', '9', '5', '10.1'];
numbers.sort((a, b) => b - a); // descending
console.log(numbers); // result: [ '4', '2.22', '10Q', '90L', '3P', '10.1', '9', '5' ]
```

------------

The ultimate course to JavaScript debugging. [**Learn How to Debug JavaScript Errors**](https://www.pjtra.com/t/SENKTE5HT0ZDSEpMTk9JQ0hHSUtOTg "Learn How to Debug Errors in JavaScript")

------------


## JavaScript Array Loops.

To interact with each item in an array or maybe change each item in an array we simply loop through the array. As a web developer, you will always loop through arrays, as long as you keep using arrays. You cannot run away from it.

There are several cool ways to loop through arrays in JavaScript, one of which is using the JavaScript [higher-order array methods](https://www.codecademy.com/learn/game-dev-learn-javascript-higher-order-functions-and-iterators/modules/game-dev-learn-javascript-iterators/cheatsheet).

These higher-order array methods can loop through an array and make changes or simply return a value based on some conditions. We will not be looking at every one of them, but we will be looking at the ones you will often find yourself in need of.

### Changing or Reading each item in an array.

The following methods can be comfortably and suitably used to modify or read each item in an array.

#### The `forEach()` method

The `forEach()` method is an array method that can execute a function for each item in an array.

The `forEach()` method takes a callback function, and this function can take up to three parameters. The first parameter represents each item in the array, the second parameter represents the index of each item in the array, and the third parameter represents the array you are looping. The second and third are optional.

```js
const numbers = [3, 4, 1, 3];

numbers.forEach((number, index) => {
  console.log(number + index);
});
```

You should note that the `forEach()` method returns undefined as its value. So when can I use the `forEach()` method? Say you have a very complex array with objects that represents a user. Assuming you are to create an HTML element for each user in the array, you could say

```js
const users = [
  {
    username: 'johndoe_4real',
    email: 'johndoe@gmail.com',
  },
  {
    username: 'spacex_elon',
    email: 'elonmusk@spacex.com',
  },
  {
    username: 'therock',
    email: 'therock@wwe.com',
  },
];

function createListElement(user) {
  const li = document.createElement('li');

  li.innerHTML = `
  <h2>I am ${user.username}</h2>
  <p>Contact me via ${user.email}
  `;
  ul.appendChild(li);
}

users.forEach((user) => {
  createListElement(user);
});
```

So for each item, our `forEach()` method will call a function that creates an `<li>` element.

#### The `map()` method

Just like the `forEach()` method and apparently every other higher-order array method, the `map()` method takes in a callback function as an argument. This function takes three parameters. The first parameter represents each item in the array, the second represents the index of each item, and the third represents the array being looped.

```js
const numbers = [1, 2, 3, 4, 5];

numbers.map((number, index) => {
  console.log(number + index);
});
```

The `map()` method is one of the most used higher-order array methods. Very similar to the `forEach()` method. The difference is while a `forEach()` method cannot return a value, a `map()` method gladly returns an array as its value.

Say we wanted to print the result of the code above as a new array, using `forEach()` would be

```js
const numbers = [1, 2, 3, 4, 5];
const newNumbers = [];

numbers.forEach((number, index) => {
  newNumbers.push(number + index);
});
console.log(newNumbers); // result: [1, 3, 5, 7, 9]
```

But with the map method, it is way easier

```js
const numbers = [1, 2, 3, 4, 5];

const newNumbers = numbers.map((number, index) => {
  return number + index;
});
console.log(newNumbers); // result: [1, 3, 5, 7, 9]
```

Though it is easier, it is more than 60% slower than the first example with the `forEach()` method. So make your choice.

#### The `filter()` method

The `filter()` method returns an array of each item in an array that passes a test. It takes a callback function with three parameters just as the above in `map()` and `forEach()`.

```js
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const newNumbers = numbers.filter((number) => {
  return number > 5;
});
console.log(newNumbers); // result: [6, 7, 8, 9, 10]
```

Simply put, the `filter()` method filters a group of elements from an array and returns a new array containing these items. Say you have a very complex array of objects representing a user. So here we are with a bunch of users, if we wish to get all the admins in this array we would say

```js
const users = [
  { name: 'Jerry', age: 20, isAdmin: false },
  { name: 'Brad', age: 22, isAdmin: false },
  { name: 'Jennifer', age: 19, isAdmin: true },
  { name: 'Simon', age: 20, isAdmin: false },
  { name: 'Rajash', age: 24, isAdmin: true },
];

const admins = users.filter((user) => {
  return user.isAdmin;
});
console.log(admins);
/* result: [ { name: 'Jennifer', age: 19, isAdmin: true },
  { name: 'Rajash', age: 24, isAdmin: true } ]
*/
```

The code inside the callback function will check for each item if `isAdmin` is true. The `filter()` method is one of the methods you will always find yourself using when working with arrays in JavaScript.

There is almost another method that is similar to the filter method is the find method.


------------

Hey there, I figured you might be interested in [**learning Asynchronous Javascript.**](https://www.pntrac.com/t/SENKTE5HTE9DSEpMTk9JQ0hHSUtOTg "learning Asynchronous Javascript")

------------


#### The `find()` method

The `find()` method though [not supported in older browsers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find#specifications) can serve as a good way to get a unique item from a list. The `find()` method loops through an array to return the first item of that array that passes a test or condition.

It takes a callback function which in turn takes three parameters as mentioned before in the `map()` and `forEach()` methods.

```js
const users = [
  { name: 'Jerry', age: 20, isAdmin: false },
  { name: 'Brad', age: 22, isAdmin: false },
  { name: 'Jennifer', age: 19, isAdmin: true },
  { name: 'Simon', age: 20, isAdmin: false },
  { name: 'Rajash', age: 24, isAdmin: true },
];

const anAdmin = users.find((user) => {
  return user.isAdmin;
});
console.log(anAdmin); // result: { name: 'Jennifer', age: 19, isAdmin: true }
```

It is quite similar to the `filter()` method in returning unique items in an array. For example, we have a class of students, and in this class, there is only one girl; we could use the `filter()` method to return the girl thus

```js
const students = [
  { name: 'Jerry', age: 20, gender: 'male' },
  { name: 'Brad', age: 22, gender: 'male' },
  { name: 'Jennifer', age: 19, gender: 'female' },
  { name: 'Simon', age: 20, gender: 'male' },
  { name: 'Rajash', age: 24, gender: 'male' },
];

const onlyGirl = students.filter((student) => {
  return student.gender === 'female';
});
console.log(onlyGirl); // result: [ { name: 'Jennifer', age: 19, gender: 'female' } ]
```

We can also perform the same function using the `find()` method thus

```js
const students = [
  { name: 'Jerry', age: 20, gender: 'male' },
  { name: 'Brad', age: 22, gender: 'male' },
  { name: 'Jennifer', age: 19, gender: 'female' },
  { name: 'Simon', age: 20, gender: 'male' },
  { name: 'Rajash', age: 24, gender: 'male' },
];

const onlyGirl = students.find((student) => {
  return student.gender === 'female';
});
console.log(onlyGirl); // result: { name: 'Jennifer', age: 19, gender: 'female' }
```

You should note that the `find()` method is **78.1%** slower than the `filter()` method in the operation above.

It can also be useful in getting one of many other items. Again say we have a class of students, and in this class, there are 20 girls. If we want to get any girl (doesn't matter who, just any girl), we could use the `find()` method.

But when we want to get all the girls then using the `filter()` method is our best option, because obviously `find()` is not going to get us what we want here.

There are other higher-order array methods that are used with conditionals like the

1. **`every()`** method - checks if all the items in an array pass a test or condition; returns a Boolean as its value,
2. **`some()`** method - checks if some of the items in an array pass a test or condition; returns a Boolean as its value, and
3. **`findIndex()`** method - returns the index of the first array that passes a test or condition.

These three are not popular because they are not always used, but it is good for you to know them, it may come in handy someday.

So these are the higher-order array methods commonly used for looping arrays. You can also use the for loop or while loop to iterate an array. All of the examples above can be done with a for loop or while loop.

But not too many developers don't use the for loop for JavaScript arrays, they prefer using the array methods. Probably because of the readability and complexity. But the truth is the for loop is faster than these array methods when performing their job.

There are times it is 72% faster and there are times when it is slightly faster depending on the complexity of the task to be done. The more the complexity, the faster it is.

Let's practically try this out.
The last example we made mention of above is getting all the girls in a class of students, I am going to use the `forEach()` method, the `filter()` method, and then a for a loop. And we will run these codes in [jsbench](https://jsbench.me/) and see which is fastest.

#### Our global array

```js
const students = [
  { name: 'Jerry', age: 20, gender: 'male' },
  { name: 'Brad', age: 22, gender: 'male' },
  { name: 'Jennifer', age: 19, gender: 'female' },
  { name: 'Simon', age: 20, gender: 'male' },
  { name: 'Sandra', age: 24, gender: 'female' },
];
```

#### Using foreach

```js
const allGirls = [];

students.forEach((student) => {
  if (student.gender === 'female') {
    allGirls.push(student);
  }
});
console.log(allGirls);
```

#### Using filter

```js
const allGirls = students.filter((student) => {
  return student.gender === 'female';
});
console.log(allGirls);
```

#### Using for loop

```js
const allGirls = [];

for (let i = 0; i < students.length; i++) {
  if (students[i].gender === 'female') {
    allGirls.push(students[i]);
  }
}
console.log(allGirls);
```

![Jsbench result](https://webdeverguide.com/wp-content/uploads/2021/07/jsbench.png "Jsbench result")

Am not sure if you can see that screenshot, because I can't see anything. Nonetheless, you can just copy the code and try it out on jsbench.me. But from what I tested the for loop was fastest, followed by the forEach and then then the filter method.

## Conclusion

Alright, my fellow programmers, this is where I will draw the curtain on arrays. There are so many beautiful things about an array just as there are in JavaScript. If you want to learn more JavaScript, or more array methods and properties you can check out the [Codecademy course](https://www.pntrac.com/t/TUJGR0lLR0JHSUtNTkhCR0ZISk1N "Codecademy course").

With Codecademy you can also build projects and see how these things work in real-world applications.

Please if you like people this article, you can kindly like, comment, and share it with your fellow programmers. You can also subscribe to my newsletter to get updates when I make new posts. You can buy me coffee to support my blogging.

Don't also forget to..., no that's fine, I feel like I have asked too much from you :). You've done a lot. Thanks. Happy hacking and learning. See you next time.