Array Methods


Uncategorized

Updated Jul 28th, 2021

All of these array methods do not mutate the original array so we don’t wory about changing the original arrays.

Filter

Include all of the items less than $100 in a new array

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

Map

Do something to every item in an array.

const itemNames = items.map(items => {
  return item.price
})

Find

“Find” a single item in an array. Returns an item for the very first one where it’s true.

const itemNames = items.find(item => {
  return item.name === "Album"
})

forEach

Does not return anything. Works very similar to a “for loop.”

items.forEach(item => {
  console.log(item.name)
})

some

A bit different than most others in that it returns “true” or “false” instead of a brand new array.

const hasInexpensiveItems = items.some(items => {
  return item.price <= 100
})

console.log(hasInexpensiveItems)  // result true

every

Similar to the “.some()” method but instead of checking for a single item checks to see if every item meets a condition an returns “true” or “false.”

const overTenBucks = items.every(item => {
  return item.price > 10
})

// expected result is false

reduce

Different from the other methods in that it is actually doing an operation on the array and returning a combination of all those different operations. good for addition. Easier than a “for” loop. Takes a second argument.

const total  = items.reduce((currentTotal, item) => {
  return item.price + currentTotal
}, 0)

Note that the zero signifies our starting point and “currentTotal” is the running total.

The “.reduce()” method runs a function on every single item of the array.

includes

Doesn’t actually take a function it just takes a single argument and checks to see if it is inside, returns true or false. Simpler than having to do a complex “.find()” method for example when you have a very simple array.

const items = [4, 23, 6, 7, 12]

const includesTwo = items.includes(23)

// expected result is "true"

Sort

Self explanatory on desired effect. Takes two values and returns 1 or -1 to bubble throughout the array.

// sort companies by the start year from the earliest to the latest

unsortedCompanies = []


const sortedCompanies = unsortedCompanies.sort((company1, company2) => {
  if (company1.start > company2.start) {
    return 1
  } else {
    return -1
  }
})

Note: will often see “a” and “b” versus “company1” and “company2.”

Note: Also common to use a “ternary operator” in the function block.

Note: when it comes to numbers, in the case of non-leading-zeroes, you may need to use “a – b” or “b – a” syntax.

const sortAges = ages.sort(a, b => a - b)

Array.from()

Creates a new shallow copied array from an array-like or iterable object.

// convert string of numbers to an array of numbers

const str = "1234567"

const res = Array.from(str, mapFn)

function mapFn(x) {
  return Number(x)
}

// expected results [1, 2, 3, 4, 5, 6, 7]

Refactor this to an arrow function. Another use case if you wan to remove all the duplicated values in an array.

const numbers = [1, 1, 2, 3, 8, 8, 16, 32, 64]

const res = Array.from(new Set(numbers))

//expected result [1, 2, 3, 8, 16, 32, 64]

Note: a “set” in JavaScript is an object that lets you store unique values of any type.