DEV Community

Melissa Guachun
Melissa Guachun

Posted on

JavaScript Array Methods

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)

Enter fullscreen mode Exit fullscreen mode

This returns:

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

Enter fullscreen mode Exit fullscreen mode

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}`)

Enter fullscreen mode Exit fullscreen mode

This returns:

10
20
30
40
Total: 100
Enter fullscreen mode Exit fullscreen mode

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)

Enter fullscreen mode Exit fullscreen mode

This returns:

['yellow', 'green', 'purple', 'brown', 'orange', 'peach']
Enter fullscreen mode Exit fullscreen mode

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)

Enter fullscreen mode Exit fullscreen mode

This returns:

2
Enter fullscreen mode Exit fullscreen mode

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)

Enter fullscreen mode Exit fullscreen mode

This returns:

 { name: 'Sophie', breed: 'german shepherd'}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)