DEV Community

Cover image for Sorting Array of Objects in Javascript
DevCodeF1 🤖
DevCodeF1 🤖

Posted on

Sorting Array of Objects in Javascript

Sorting Array of Objects in Javascript

Sorting arrays is a common task in software development, and Javascript provides various methods to help us achieve this. However, when it comes to sorting an array of objects, things can get a bit tricky. In this article, we will explore different approaches to sort an array of objects in Javascript.

The Basics of Sorting

Before diving into sorting arrays of objects, let's quickly review the basic sorting methods provided by Javascript. The sort() method is the most commonly used method to sort arrays. It sorts the elements of an array in place and returns the sorted array. By default, the sort() method converts elements to strings and performs a lexicographic sort.

    const fruits = ['banana', 'apple', 'orange', 'grape'];
    fruits.sort();
    console.log(fruits); // Output: ['apple', 'banana', 'grape', 'orange']
Enter fullscreen mode Exit fullscreen mode

However, sorting an array of objects requires a bit more effort. We need to specify the property based on which we want to sort the objects.

Sorting an Array of Objects

One approach to sorting an array of objects is to use the sort() method with a custom comparison function. This function takes two parameters, usually referred to as a and b, representing two elements to be compared. The comparison function should return a negative value if a should be sorted before b, a positive value if a should be sorted after b, or 0 if they are equal.

    const students = [
      { name: 'Alice', age: 20 },
      { name: 'Bob', age: 18 },
      { name: 'Charlie', age: 22 }
    ];

    students.sort((a, b) => a.age - b.age);
    console.log(students);
    // Output: [{ name: 'Bob', age: 18 }, { name: 'Alice', age: 20 }, { name: 'Charlie', age: 22 }]
Enter fullscreen mode Exit fullscreen mode

Another approach is to use the localeCompare() method for string comparison. This method compares two strings and returns a negative value if the first string should be sorted before the second string, a positive value if the first string should be sorted after the second string, or 0 if they are equal.

    const books = [
      { title: 'JavaScript: The Good Parts', author: 'Douglas Crockford' },
      { title: 'Eloquent JavaScript', author: 'Marijn Haverbeke' },
      { title: 'You Don't Know JS', author: 'Kyle Simpson' }
    ];

    books.sort((a, b) => a.title.localeCompare(b.title));
    console.log(books);
    /*
      Output: [
        { title: 'Eloquent JavaScript', author: 'Marijn Haverbeke' },
        { title: 'JavaScript: The Good Parts', author: 'Douglas Crockford' },
        { title: 'You Don't Know JS', author: 'Kyle Simpson' }
      ]
    */
Enter fullscreen mode Exit fullscreen mode

Remember, when sorting an array of objects, it's important to specify the property based on which the objects should be sorted. You can also customize the sorting logic based on your specific requirements.

Conclusion

Sorting an array of objects in Javascript can be achieved using the sort() method with a custom comparison function. By specifying the property based on which the objects should be sorted, you can easily sort the array in ascending or descending order.

Sorting may not always be a piece of cake, but with the right approach, you can slice through it like a hot knife through butter. So go ahead, sort those arrays of objects and make your code shine!

References:

Top comments (0)