Sort, Find & Filter Array Elements in JavaScript

In JavaScript, arrays come with a lot of built-in methods, including ones for sorting, finding, and filtering their elements.

Sort array elements

To sort the elements of an array in ascending order, you can use the sort() method of the array instance:

array = array.sort();

Note: This method modifies the array instance itself and returns a reference to it.

On the other hand, to manually determine the order in which the elements should be sorted, you can pass a callback function to the sort() method, that takes two arguments and returns an integer resulting from the comparison between them:

array = array.sort((a, b) => value);

Where:

• A negative value will sort elements in ascending order.
• A positive value will sort elements in descending order.
• A zero or NaN value will consider that elements are equal.

Example

Let's consider this script, that sorts an array of numbers:

let values = [3, 1, 4, 5, 2].sort();

console.log(values);

When executed, it will sort the values of the array in ascending order.

Which will produce this output:

[ 1, 2, 3, 4, 5 ]

Example

Let's consider this script, that sorts an array of numbers:

let values = [3, 1, 4, 5, 2].sort((a, b) => b - a);

console.log(values);

When executed, it will sort the values of the array in descending order.

Which will produce this output:

[ 5, 4, 3, 2, 1 ]

Find an element

To find the first element within an array that satisfies a certain condition, you can use the find() method of the array instance:

value = array.find((element, index?) => {
  if (condition) {
    return true;
  }
});

Where:

• element is the value of the current element.
• index (optional) is the index of the current element in the array.
• condition is a boolean expression used to evaluate whether the current element is a match.

This method loops on each element of the array and either returns the current element if the callback function returns a truthy value, or undefined if no element satisfies the specified condition.

Example

Let's consider this script, that searches for a matching user in a list:

const users = [
  {
    id: 1,
    email: 'johndoe@gmail.com',
    name: 'John Doe',
    account: 'visitor'
  },
  {
    id: 4,
    email: 'ella.johnson@outlook.com',
    name: 'Ella Johnson',
    account: 'student'
  },
  {
    id: 11,
    email: 'fblyke@gmail.com',
    name: 'Francesca Blyke',
    account: 'student'
  },
];

const user = users.find(user => user.account === 'student');

console.log(user);

When executed, it will use the find() method of the users array to return the first object whose account property equals to the string "student".

Which will produce this output:

{
  id: 4,
  email: 'ella.johnson@outlook.com',
  name: 'Ella Johnson',
  account: 'student'
}

Filter array elements

To filter the elements of an array that satisfy a certain condition, you can use the filter() method of the array instance:

copy = array.filter((element, index) => {
  if (condition) {
    return true;
  }
});

This method loops on each element of the array and returns a shallow copy of the given portion of the array.

Example

Let's consider this script, that filters online players based on their status:

const players = [
  {
    pseudo: 'johnny5',
    isOnline: true,
    status: 'idle'
  },
  {
    pseudo: 'x_stellar_x',
    isOnline: false,
    status: null
  },
  {
    pseudo: 'D4RKGH05T',
    isOnline: true,
    status: 'in_game'
  },
];

const onlinePlayers = players.filter(player => player.isOnline && player.status !== 'idle');

console.log(onlinePlayers);

When executed, it will use the filter() method of the players array to only return the objects whose isOnline property is set to true and status property is different from the string "idle".

Which will produce this output:

[ { pseudo: 'D4RKGH05T', isOnline: true, status: 'in_game' } ]