# 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)

A simple example:

```js
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:

```js
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:

```js
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:

```js {5}
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):

```js
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 "maps" one array to another array. It always consumes arrays
and always returning arrays.

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

```js
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:

```js
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:

```js
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 are a few more array methods, such as `reduce`. For a full introduction,
continue with [the guide to JavaScript's `reduce` method](/reduce).