clubmate.fi

Common JavaScript array methods and Object.keys()

A lightweight introduction into some of array methods in JavaScript, and how work with objects in an iterative manner.

Object.keys()

Object.keys() extracts keys from a given object, the returned array can be used as is, or couple it with an iteration method like forEach or map.

The Object.keys() method returns an array of a given object’s own enumerable properties... MDN

A simple example:

var nameObj = { first: 'Zaphod', last: 'Beeblebrox' }

console.log(Object.keys(nameObj))
// ["first", "last"]

Object.keys() coupled with an iterator

Using with forEach in this case:

var nameObj = { first: 'Zaphod', last: 'Beeblebrox' }

Object.keys(nameObj).forEach(function (key) {
  console.log(key + ': ' + nameObj[key])
})
// first: Zaphod
// last: Beeblebrox

Array.prototype.some()

The some method returns a boolean if some of the item in the array pass a given test.

Here’s an example using an Object of countries and their population counts:

var countries = {
  China: 1371980000,
  India: 1276860000,
  'United States': 321786000,
  Indonesia: 255461700,
  Brazil: 204873000,
  Pakistan: 190860000
}

// Test function
function testPopulation(element) {
  return countries[element] > 1000000000
}

// Using the countries array the following condition should return true
if (Object.keys(countries).some(testPopulation)) {
  console.log('Object contains a populous country')
}

When some hits a country which population is greater than 100 000 000 0, it returns immediately, it’s enough if only one of the values is over the given threshold.

Array.prototype.every()

Like the name says, every tests every value in the array. Using the above countries object and the same callback function, we can check if all the items in the array pass the test:

function testPopulation(element) {
  return countries[element] > 1000000000
}

const foo = Object.keys(countries).every(testPopulation)// false

In this case foo would be false, since some of the countries have population under a billion.

Array.prototype.filter()

The filter in the below example removes countries with population count under billion or a billion, and return their keys (name of the country):

function testPopulation(element) {
  return countries[key] <= 1000000000
}

countries = Object.keys(countries).filter(testPopulation)

console.log(countries)
// ["UnitedStates", "Indonesia", "Brazil", "Pakistan"]

Array.prototype.map()

the map method kind of "maps" an array to another array. Always consuming arrays and always returning arrays.

The following example takes an array of country names, and maps those to an array of population counts:

var countryNames = Object.keys(countries)
var populationCounts = countryNames.map(function (country) {
  return countries[country]
})

console.log(countriesFiltered)
// [1371980000, 1276860000, 321786000, 255461700, 204873000, 190860000]

Any manipulation can be done to the value in the loop:

var numbers = [1, 4, 9]
var doubles = numbers.map(function (number) {
  return number * 2
})

console.log(doubles)
// [2, 8, 18]

Chaining the array methods

Below example chains some of the array methods and uses arrow functions to shorten the syntax:

const countryNames = Object.keys(countries)
const humanizedPopulationCount = countryNames
  .filter(country => countries[country] <= 1000000000)
  .map(country => countries[country].toLocaleString('de-DE'))

console.log(humanizedPopulationCount)
// ["321.786.000", "255.461.700", "204.873.000", "190.860.000"]

Conclusions

There’s few more array methods out there, like the reduce. But that’s for another post.