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.

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:

'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.

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

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

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

This returns:

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.

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:

['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.


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:

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.

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:

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

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

JavaScript Array Methods