Important JavaScript Array Functions To Keep On Your Fingertips

JavaScript has some amazing Array Functions that help you out in your day to day array handling especially if you are consuming data from an API that returns a list/array of items lets say you have an array of Members from your an API that manages members of lets say a club or maybe you just have an array of numbers you need to manipulate. examples below

let members = [
{
 name: 'Blessed Mahuni',
 age: 22,
 memberType: 'gold'
},
{
 name: 'Victoria Mahuni',
 age: 16,
 memberType: 'gold'
}
]

The Array Functions we are going to talk about are

• filter
• map
• find
• ...(spread operator)
• join
• reverse
• push

Push

This one is simple to understand as the name says you are pushing data into your array in other words adding data at the end of the array example we need to update the list of our members in our members array.

const member = {
 name: 'Moreblessing Mahuni',
 age: 20,
 memberType: 'silver'
}

members.push(member)
// The member 'Moreblessing Mahuni' will now be in our members array

Reverse

This is another simple to understand and its functionality is as its name states. Reverse reverses the order of elements in an array. Lets say we have an array [1,2,3,4] and we use the reverse function the result array is [4,3,2,1]

let numbers = [34,45,67,12,45,67]

let reversedNumbers = numbers.reverse()

console.log(reversedNumbers) // [67,45,12,67,45,34]

...(spread operator)

The spread operator is a very useful operator it is used where we need to operate on elements of an array individually. I normally use it when i want to create a clone of an array which does not reference to the same array object.

let numbers1 = [34,45,67,45,67]
let numbers2 = numbers1

/*
numbers1 and numbers2 are references to the same object [34,45,67,45,67] 
so changes to number1 will affect numbers2 but usually we wouldn't want to do
this so the spread operator comes to the rescue
*/

let numbers3 = []
numbers3.push(...numbers1)

//changes to numbers3 will not affect numbers1

Filter

The filter functions creates a new array with elements that fit a certain criteria i.e. filtered array. This is a very convenient function and most of the time it will come in handy. In our members array lets filter the members and get a members list of memberType 'gold'

let goldMembers = members.filter((member) => {
 if(member.memberType === 'gold')
     return member
})

Here is what is going on the function iterates over all the members and the callback that you pass to the function will be applied on each element therefor in my case it will test if the memberType is equal to gold if it is equal to gold we return the member this returned value will be appended to the new array in this case goldMembers

Find

The find function is useful if you are looking for a specific element in an array. The function will return the value of the first element that satisfies the the condition. The code will explain it better.

let silverMember = members.find((member) => {
 if(member.memberType === 'silver')
   return member
})

The code above will return the first element in the members array that has member type silver

Map

Map creates a new array with element values that have been altered by a function that has been called on each element value. Lets explain with an example lets say you have an array [2,4,6,8] and you what to double the values in this array it would be perfect to use map with a one liner instead of looping through each and pushing to the new array. See code below

// The Map Way
let numbersToBeDoubled = [2,4,6,8]
let doubledNumbers = numbersToBeDoubled.map(x => x*2);

//The Loop Through Way
numbersToBeDoubled.forEach(num => {
  doubledNumbers.push(num*2)
})

As you can see the map way is dope.

Join

As the name says this function joins all the elements in an array and creates a string. The default separator is a comma but you can specify the separator.

let nums = [1,2,3,4]
let joinedNums = nums.join() // "1,2,3,4"
let joinedNumsWithColon = nums.join(":") // "1:2:3:4" specified joiner

At least this is the list of functions that i frequently use on arrays whats your add to the list and please put some sample code and explain