DEV Community

loading...
Cover image for 8 Basic JavaScript Array Methods

8 Basic JavaScript Array Methods

Connor Dillon
Full-stack Javascript developer, fire dancer, physics nerd, Vim fanboy, and technical writer! I'm passionate about my work and love to talk shop, so say hi!
・3 min read

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 },
]
Enter fullscreen mode Exit fullscreen mode

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 }
]
*/
Enter fullscreen mode Exit fullscreen mode

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'
]
*/
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

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
*/
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Discussion (0)