JavaScript Array Methods
Tags: javascript, beginners, programming, productivity
Published: 2022-02-08 18:23:08

## JavaScript Array Methods

JavaScript has a great range of functional methods with arrays, and that is what I'm going to try to show in this article.

> Every method in this article iterates over the array to apply changes or return a value


### Array Map

The array map is used to apply some logic to an array and return the result as an array.

```javascript
// Frist we are creating a array of foods
> foods = ['apple','leberkässemmel','Pao de Queijo']
[ 'apple', 'leberkässemmel', 'Pao de Queijo' ]

// Then we apply the suffix sold out 
// to each food to indicate its state
> foods.map(food => `${food} sold out`)
[
  'apple sold out',
  'leberkässemmel sold out',
  'Pao de Queijo sold out'
]
```

### Array Flat Map

The flat map is almost like the map, but it turns a matrix into an array without applying any logic, although, you can specify the depth that you want to flat.

```javascript
 // Frist we create an Array of arrays or a matrix
> foods = [['Apple','Onion Rings'],['leberkässemmel','Bier'],[[[['Pao de Queijo', 'Feijoada']]]]]
[
  [ 'Apple', 'Onion Rings' ],
  [ 'leberkässemmel', 'Bier' ],
  [[[[ 'Pao de Queijo', 'Feijoada' ]]]]
]

// We can apply the flat method and 
// it will flatten the array but with the depth of 1
> foods.flat()
[
  'Apple',
  'Onion Rings',
  'leberkässemmel',
  'Bier',
  [[['Pao de Queijo',
  'Feijoada']]]
]


// Now specifying the depth the result is a flat array
> foods.flat(4)
[
  'Apple',
  'Onion Rings',
  'leberkässemmel',
  'Bier',
  'Pao de Queijo',
  'Feijoada'
]
```

### Array Flat Map

The flatmap does the same thing as a map followed by a flat with depth 1.

```javascript
// Now we have a matrix of foods with depth of 1
> foods = [['Apple','Onion Rings'],['leberkässemmel','Bier'],['Pao de Queijo', 'Feijoada']]
[
  [ 'Apple', 'Onion Rings' ],
  [ 'leberkässemmel', 'Bier' ],
  [ 'Pao de Queijo', 'Feijoada' ]
]

// Using the flatMap we are going to flat 
// the array and apply some logic to it, like the number of items.
> foods.flatMap(food => `${food} 10`)
[
  'Apple,Onion Rings 10',
  'leberkässemmel,Bier 10',
  'Pao de Queijo,Feijoada 10'
]
```
### Array Find

The array find is used to find and return an element from an array

```javascript
// We are creating our foods array again
// to find an specific element
> foods = ['Apple','Onion Rings','leberkässemmel','Bier','Pao de Queijo', 'Feijoada']
[
  'Apple',
  'Onion Rings',
  'leberkässemmel',
  'Bier',
  'Pao de Queijo',
  'Feijoada'
]

// The find element searches the array
// until a comparison return trues
> foods.find(food => food === 'Bier')
'Bier'

// It can be used with startsWith for instance
> foods.find(food => food.startsWith('A'))
'Apple'

// Or even with includes
> foods.find(food => food.includes('e'))
'Apple'
```

### Array Filter

The array filter works like find, but it returns an array of elements found. Let's see the difference using the same examples

```javascript
// Our Array
> foods = ['Apple','Onion Rings','leberkässemmel','Bier','Pao de Queijo', 'Feijoada']
[
  'Apple',
  'Onion Rings',
  'leberkässemmel',
  'Bier',
  'Pao de Queijo',
  'Feijoada'
]

// As we only have one Bier on our array, 
// its going to return one element array
> foods.filter(food => food === 'Bier')
[ 'Bier' ]

// The same thing will happen with the second example
> foods.filter(food => food.startsWith('A'))
[ 'Apple' ]

// Now in our last example things are going 
// to be different we will get every food
// except for Onion Rings, because it has 
// no E
> foods.filter(food => food.includes('e'))
[ 'Apple', 'leberkässemmel', 'Bier', 'Pao de Queijo', 'Feijoada' ]
```

### Array Reduce

The array reduce is used to reduce the value from a callback function.

```javascript
// Lets create array of number
> numbers = [1,2,3,4,5,6,7,8,9]
[
  1, 2, 3, 4, 5,
  6, 7, 8, 9
]

// The reduce method is going to reduce the array to a
// sum of all array numbers
> numbers.reduce((number, currentValue) => currentValue + number)
45
```

It's also possible to create new objects with reducing

```javascript
// Lets create an array with emojis
> emojis = ['😛','😜','😇','😛','😜','😛','😇']
[
  '😛', '😜',
  '😇', '😛',
  '😜', '😛',
  '😇'
]

// Now lets put our logic inside reduce to count
// how many times each emoji has appeared
> emojis.reduce((objEmoji, emoji)=>{
    if(emoji in objEmoji){
      objEmoji[emoji]++
    }else{
      objEmoji[emoji] = 1
    }
  return objEmoji
  },{})
{ '😛': 3, '😜': 2, '😇': 2 }
```

### Array Every

The array every method verifies if every element in the array is the one you are using to compare and returns a boolean as result.

```javascript
//Lets create our emoji
> emojis = ['😈','😈','😈','😈']
[ '😈', '😈', '😈', '😈' ]

// As the emojis are not the same the
// comparison result is false
> emojis.every(emoji => emoji === '😇')
false

// Comparing with the same emoji
// the result is true
> emojis.every(emoji => emoji === '😈')
true
```

### Array Some

The array some method verifies if one or more elements are present in the array and returns a boolean as result.

```javascript
// Lets create our array of emojis
> emojis = ['😛','😜','😇','😛','😜','😱','👽']
[
  '😛', '😜',
  '😇', '😛',
  '😜', '😱',
  '👽'
]

// We are going to receive a true,
// because there is a 😱 emoji
> emojis.some(emoji => emoji === '😱')
true

// Now the return is going to be false,
// because there is no 😈 in our array
> emojis.some(emoji => emoji === '😈')
false
```

### Array At

The array "at" is a new way to move over the array without the need of `array.length`

```javascript
// Our array of emojis
> emojis = ['😛','😜','😇','😛','😜','😱','👽']
[
  '😛', '😜',
  '😇', '😛',
  '😜', '😱',
  '👽'
]

// The at index works as the same as a normal array,
// but you can use negative numbers to go
// from the last array position
> emojis.at(-1)
'👽'
```