Sort the Keys of an Object in JavaScript

avatar
Borislav Hadzhiev

Last updated: Mar 6, 2024
3 min

banner

# Sort the Keys of an Object in JavaScript

To sort the keys of an object:

  1. Use the Object.keys() method to get an array of the object's keys.
  2. Call the sort() method on the array.
  3. Call the reduce() method to get an object with sorted keys.
index.js
const obj = {z: 'three', a: 'one', b: 'two'}; const sorted = Object.keys(obj) .sort() .reduce((accumulator, key) => { accumulator[key] = obj[key]; return accumulator; }, {}); console.log(sorted); // ๐Ÿ‘‰๏ธ {a: 'one', b: 'two', z: 'three'}

sort keys of an object

The code for this article is available on GitHub

We used the Object.keys() method to get an array of the object's keys.

index.js
const obj = {z: 'three', a: 'one', b: 'two'}; // ๐Ÿ‘‡๏ธ ['z', 'a', 'b'] console.log(Object.keys(obj));

The next step is to use the Array.sort() method to sort the array of keys.

index.js
const obj = {z: 'three', a: 'one', b: 'two'}; // ๐Ÿ‘‡๏ธ ['a', 'b', 'z'] console.log(Object.keys(obj).sort());

At this point, we have a sorted array containing the object's keys.

The last thing we have to do is use the Array.reduce() method to iterate over the sorted array of keys and assign each key-value pair to an object.

index.js
const obj = {z: 'three', a: 'one', b: 'two'}; // ๐Ÿ‘‡๏ธ ['a', 'b', 'z'] console.log(Object.keys(obj).sort()); const sorted = Object.keys(obj) .sort() .reduce((accumulator, key) => { accumulator[key] = obj[key]; return accumulator; }, {}); console.log(sorted); // ๐Ÿ‘‰๏ธ {a: 'one', b: 'two', z: 'three'}

The function we passed to the reduce() method gets called with each element (key) in the array.

We provided an empty object as the initial value for the accumulator variable.

On each iteration, we assign the key-value pair to the accumulator object and return the result.

The value we return from the callback function gets passed as the accumulator on the next iteration.

After the last iteration, the object contains all of the key-value pairs in a sorted order.

Make sure to pass an empty object as the second parameter to the reduce method. This is the initial value for the accumulator variable.

Note that this approach doesn't change the order of the keys in the original object. It creates a new object with sorted keys.

Now you can iterate over the sorted object by using the Object.keys() and the forEach() methods.

index.js
const obj = {z: 'three', a: 'one', b: 'two'}; // ๐Ÿ‘‡๏ธ ['a', 'b', 'z'] console.log(Object.keys(obj).sort()); const sorted = Object.keys(obj) .sort() .reduce((accumulator, key) => { accumulator[key] = obj[key]; return accumulator; }, {}); Object.keys(sorted).forEach(key => { console.log(key, sorted[key]); // ๐Ÿ‘‰๏ธ a one, b two, z three });

iterate over sorted object by using object keys and foreach

The code for this article is available on GitHub

The function we passed to the forEach() method gets called with each element (key) in the array.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev