JavaScript Array Methods

#javascript #beginners #programming #productivity

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.

// 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.

 // 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.

// 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

// 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

// 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.

// 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

// 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.

//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.

// 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

// 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)
'👽'