How to Sort JavaScript Object by Keys

In JavaScript, occasionally you may need to sort the keys of an object alphabetically or in a specific order for display or processing. While JavaScript objects don’t guarantee any particular order for their properties, you can sort their keys using various techniques. In this tutorial, you will learn how to sort JavaScript object keys.

JavaScript Objects:

JavaScript objects are collections of key-value pairs, where keys are strings (or Symbols), and values can be of any data type. Here’s a simple example of a JavaScript object:

const sampleObject = {
    banana: 3,
    apple: 1,
    orange: 2,
    pear: 4,
};

In this example, the object has four properties: banana, apple, orange, and pear, with corresponding values.

Follow the Steps to Sort the Object Keys

1. Get the Object Keys

The first step is to retrieve the keys of the object using the Object.keys() method. This method returns an array of the object’s own enumerable property names.

const objectKeys = Object.keys(sampleObject);

Now, objectKeys contains an array of the object’s keys, which are ['banana', 'apple', 'orange', 'pear'] in our example.

2. Sort the Keys

Once you have the keys in an array, you can sort them. For alphabetical sorting, simply call the sort() method on the array:

objectKeys.sort(); // For alphabetical sorting

This will sort the keys alphabetically in ascending order. In our case, it will be ['apple', 'banana', 'orange', 'pear'].

If you need to sort the keys in a custom order, you can define a sorting function. For instance, to sort by the length of keys, you can use the following custom sorting function:

objectKeys.sort((a, b) => {
    return a.length - b.length;
});

This will sort the keys by their length, resulting in ['pear', 'apple', 'banana', 'orange'] for our example.

3. Reconstruct the Object with Sorted Keys

Once the keys are sorted, you can create a new object with the sorted keys. Iterate through the sorted keys and add the corresponding values to the new object.

const sortedObject = {};
for (const key of objectKeys) {
    sortedObject[key] = sampleObject[key];
}

Alternatively, you can use the reduce() method to achieve the same result more concisely:

const sortedObject = objectKeys.reduce((acc, key) => {
    // Assign the value of sampleObject[key] to the key in the accumulator object
    acc[key] = sampleObject[key];
    // Return the accumulator object for the next iteration
    return acc;
}, {});

Now, sortedObject contains the properties of the original object, sorted based on the selected sorting criteria.

4. Access the Sorted Object:

You can now access and work with the sorted object as needed in your application.

console.log(sortedObject);

This code will display the sorted object, whether it’s sorted alphabetically or using a custom order, depending on your chosen sorting method.

Complete JavaScript Code to Sort Object By Keys:

const sampleObject = {
    banana: 3,
    apple: 1,
    orange: 2,
    pear: 4,
};

const objectKeys = Object.keys(sampleObject);
objectKeys.sort();

const sortedObject = {};
for (const key of objectKeys) {
    sortedObject[key] = sampleObject[key];
}

console.log(sortedObject);

{ apple: 1, banana: 3, orange: 2, pear: 4 }

While JavaScript objects do not inherently maintain any specific order for their properties, you can achieve order and predictability by following the steps outlined in this guide.