JavaScript Array Methods
Tags: javascript, webdev, beginners, tutorial
Published: 2022-05-25 18:10:06

When studying array methods, it can be hard to differentiate methods from each other. So in this article, I wanted to cover some common array methods and outline specific characteristics to overall display their unique behaviors. 


**map()**
Loops through each element in an array, enabling a function to execute. It returns a new array without modifying the array it is iterating through. 

```JavaScript
const movies = ['pulp fiction','star wars','harry potter','lord of the rings']

const capitalizedMovies = movies.map(movie => {
   return movie[0].toUpperCase() + movie.slice(1)
})

console.log(capitalizedMovies)

```
This returns:

```JavaScript
'Pulp fiction', 'Star wars', 'Harry potter', 'Lord of the rings'

```
Above, we capitalized the first letter of each movie title in the array stored in `capitalizedMovies`. `capitalizedMovies` is a new array, that has capitalized titles. This means that the our original array `movies` remains the same and un-mutated. 


**forEach()** 
This is similar to map() except- forEach() doesn't return a new array, so the return value will be undefined. 

```JavaScript
const numbers = [10, 20, 30, 40]
let total = 0

numbers.forEach(num=> {
   console.log(num)
   total += num
})

console.log(`Total: ${total}`)

```

This returns:

```JavaScript
10
20
30
40
Total: 100
```


**filter()**
This loops through every element in an array. It creates a new array of elements once the iterator returns true. 

```JavaScript
const colors = ['blue', 'yellow', 'red', 'green', 'purple', 'pink', 'brown', 'orange', 'aqua', 'peach']

const longColorNames = colors.filter(color=> color.length >= 6)
console.log(longColorNames)

```
This returns:

```JavaScript 
['yellow', 'green', 'purple', 'brown', 'orange', 'peach']
```

Above, blue, red, pink, and aqua don't have a length of 6 or greater, so they return false. This is why they aren't shown in `longColorNames`.


**findIndex()**
This works on an array where if an element in the array fits the criteria, it returns the index of the element. 

```JavaScript

const dogs = [
     { name: 'Fletcher', breed: 'pitbull'},
     { name: 'Emmie', breed: 'hound'},
     { name: 'Sophie', breed: 'german shepherd'},
     { name: 'Daisy', breed: 'cocker spaniel'},
     { name: 'Cooper', breed: 'bulldog'},
     { name: 'Mary', breed: 'german shepherd'},
     { name: 'Mike', breed: 'brussels griffon'},
]

const findGS = dogs.findIndex(d => d.breed.startsWith('german'))

console.log(findGS)

```
This returns:

```JavaScript
2
```

Above, Sophie (index of 2) and Mary (index of 5) meet the parameters of dog breeds that start with 'german'. But notice, `findIndex` only returns the first found result which has an index of 2. 


**find()**
This works on an array and returns only the first element  found that meets the criteria. If none of the elements fit the criteria, it gets returned as undefined. 

```JavaScript
const dogs = [
     { name: 'Fletcher', breed: 'pitbull'},
     { name: 'Emmie', breed: 'hound'},
     { name: 'Sophie', breed: 'german shepherd'},
     { name: 'Daisy', breed: 'cocker spaniel'},
     { name: 'Cooper', breed: 'bulldog'},
     { name: 'Mary', breed: 'german shepherd'},
     { name: 'Mike', breed: 'brussels griffon'},
]

const findGS = dogs.find(d => d.breed.startsWith('german'))

console.log(findGS)

```
This returns:

```JavaScript
 { name: 'Sophie', breed: 'german shepherd'}
```

Above, you can see a whole object is being returned instead of the index being returned from `indexOf()`.