Commonly used Javascript Array Methods.

In this post we will learn about commonly used Javascript array methods that uses iteration and callback function to achieve their functionality.

iteration refers to repeated execution of a set of statements or code blocks, which allows us to perform the same operation multiple times.

In simple terms, A callback is a function definition passed as an argument to another function.

To keep things simple, we will focus on these three point.

1. When a particular array method should be used.
2. What the array method returns.
3. code example of the array method.

Before we proceed let's understand how these array methods are structured.

// Array method(callback(the condition we want to execute on each item in our array))

Each of these array method is a function that receives a callback as an argument, it is in this callback that we specify the conditions we want to execute on each of our array item.

We will be using this array of objects for our examples.

const data = [
  {
    userId: 1,
    username: "Francis",
    message: "Hey, how's it going?",
    timestamp: "2024-02-18T12:30:00Z",
    status: "online",
    messageSent: 28,
    role: "user",
    passCode: "293087O7764"
  },
  {
    userId: 2,
    username: "Moses",
    message: "Not bad, just working on a project.",
    timestamp: "2024-02-18T12:35:00Z",
    status: "away",
    messageSent: 74,
    role: "user",
    passCode: "675147O2234"
  },
  {
    userId: 3,
    username: "Vicky",
    message: "Hey folks! What's the latest gossip?",
    timestamp: "2024-02-18T12:40:00Z",
    status: "online",
    messageSent: 271,
    role: "moderator",
    passCode: "76352O8069"
  },
  {
    userId: 4,
    username: "Junior",
    message: "Not much, just chilling. How about you?",
    timestamp: "2024-02-18T12:45:00Z",
    status: "offline",
    messageSent: 125,
    role: "admin",
    passCode: "21876O3483"
  }
];

forEach: forEach is used when we want to execute a condition on all of our array items. forEach returns undefined.

function getMessageSent(users){
  let sumMessageSent = 0;
  users.forEach(function(user){
    sumMessageSent += user.messageSent;
  })  
  return sumMessageSent;
}
getMessageSent(data) // output: 498

reduce: reduce is used to reduce an array to a single value for example this array [8, 7, 3] can be reduced to the number 18. a reducer returns a single value.

The reducer function takes in two parameters first the reducer( which is made of the total and the current) and second the initialValue

The total : this is popularly called the accumulator. the total as i call it is the last computed value of the reducer function.

The current refers to a single array item. in our case we have four items(current).

The initialValue is the value we assign to the total on the first call. simply say the initalValue is the default value of the total

const getMessageSent = (users) => {
   return users.reduce((total, current) => total += current.messageSent, 0)
}
getMessageSent(data) // output: 498

filter: Array.filter is used when we want to collect only items in the array that meet a specific condition. array.filter returns an array.

const onlineUsers = (users) => {
   return users.filter(user => user.status === "online")
}
onlineUsers(data)  // output: [object object]

find Array.find is used when we want to get only the first array Item that meet the condition defined inside the callback. array.find returns the first item NOT in an array but in the format of the item, in our case that will be an object or undefined if no match was found.

const getUserRole = (users) => {
return users.find(user => user.role === "user")
}
getUserRole(data) // output: {userId: 1, username: 'Francis', message: "Hey, how's it going?", timestamp: '2024-02-18T12:30:00Z', status: 'online', …} 

Notice how only the first user that meets the condition was returned.

map Array.map is used when we want to transform the items in the array. array.map returns an array of transformed items that satisfy the condition in our callback.

const getUserNameAndPass = (users) => {
  return users.map((user) => {
    const userPassCode = user.passCode.slice(-4);
    return ${user.username}  ${userPassCode.padStart(
      user.passCode.length,
      "★"
    )};
  });
};
getUserNameAndPass(data)// output:['Francis  ★★★★★★★7764', 'Moses  ★★★★★★★2234', 'Vicky  ★★★★★★8069', 'Junior  ★★★★★★3483']

every Array.every is used when we want check if all the array items satisfy our defined condition. array.every returns a boolean. true if all the items pass the condition and false if any of the items fail the condition.

const isOnline = data.every(user => dataItem.status === 'online')
console.log(isOnline) // output:false

some Array.some is used when we want to check that some of the array items satisfy a given condition. array.some returns a boolean. true if some of the items fulfill the condition and false if all of the item fulfill or fail to fulfill the condition.

const isOnline = data.some(user => user.status === 'online');
console.log(isOnline); // output: true

These are some of the widely used array methods.