8 Basic JavaScript Array Methods

• Introduction
• Filter
• Map
• Find
• For Each
• Sum
• Every
• Reduce
• Includes

Introduction

In this article, we'll cover some basic Javascript array methods. For all but the last method ("includes"), we'll be operating on the following example array:

const items = [
  { name: 'Bike', price: 100 },
  { name: 'TV', price: 200 },
  { name: 'Album', price: 10 },
  { name: 'Book', price: 5 },
  { name: 'Phone', price: 500 },
  { name: 'Computer', price: 1000 },
  { name: 'Keyboard', price: 25 },
]

Filter

Filters array elements by a conditional statement, returning true or false and creating a new filtered array.

If true, the array element will be added to the new filtered array.

If false, the array element will not be added to the new filtered array.

const filteredItems = items.filter((item) => {
  return item.price <= 100
})

console.log(filteredItems)
/* Expected Output: 
  { name: 'Bike', price: 100 },
  { name: 'Album', price: 10 },
  { name: 'Book', price: 5 },
  { name: 'Keyboard', price: 25 }
]
*/

Map

Takes an array and creates a new array with a new specified format.

Useful for pulling keys or values from an array, or for converting an array into another array.

const itemNames = items.map((item) => {
  return item.name
})
console.log(itemNames)
/* Expected Output:
[
  'Bike',     'TV',
  'Album',    'Book',
  'Phone',    'Computer',
  'Keyboard'
]
*/

Find

Returns the first item that is found in the array that evaluates to true for the statement defined in your conditional.

const foundItem = items.find((item) => {
  return item.name === 'Book'
})
console.log(foundItem) // Expected Output: { name: 'Book', price: 5 }

For Each

Doesn't return anything, so we don't need a return statement or console.log outside of the function. Takes in a function and performs the specified operation on each array element.

items.forEach((item) => {
  console.log(item.name, item.price)
})
/* Expected Output:
Bike 100
TV 200
Album 10
Book 5
Phone 500
Computer 1000
Keyboard 25
*/

Sum

Returns a boolean instead of returning a new array.

const hasInexpensiveItems = items.sum((item) => {
  return item.price <= 100
})
const hasFreeItems = items.sum((item) => {
  return item.price <= 0
})
console.log(hasInexpensiveItems) // Expected Output: true
console.log(hasFreeItems) // Expected Output: false

Every

Similar to sum, but instead of checking for at least 1 item to evaluate to true, it checks for every item to return true, in order to return true.

const hasInexpensiveItems = items.every((item) => {
  return item.price <= 100 // Expected Output: false
})
const hasInexpensiveItems = items.every((item) => {
  return item.price <= 1100 // Expected Output: true
})
console.log(hasInexpensiveItems)

Reduce

Takes an item and property to reduce. The reduce method runs a function on every item in the array.

The first method of that function is going to be whatever the previous iteration of the reduce returned.

The second method is the actual item in the array.

The currentTotal will start at the first iteration, which is specified by the second parameter (in this case, 0.)

const total = items.reduce((currentTotal, item) => {
  return item.price + currentTotal
}, 0)
console.log(total) // Expected Output: 1840

Includes

Takes in a single argument (i.e. single-element array, not an array of objects) and checks to see if the array contains an element that matches the desired parameter, returning a boolean.

const itemsA = [1, 2, 3, 4, 5]
const includesTwo = itemsA.includes(2)
const includesSeven = itemsA.includes(7)
console.log(includesTwo) // Expected Output: true
console.log(includesSeven) // Expected Output: false