Programming with JavaScript is fun if you know how to code well. While it is always normal to have errors when you are programming. And, when you are new to JavaScript programming, you may have a lot of questions and programming issues, such as how to sort the keys of an object in JavaScript. All these are for making the web page interactive for users, which has always been the priority of every programmer, and newbies want to follow the same.

Check out how to sort the keys of an object in JavaScript.

How to Sort the Keys of an Object In JavaScript?

In JavaScript, there are objects that are containers for values known as methods and properties. In objects, we have keys and values. By default, objects in JavaScript are unordered, and to sort the keys of an object in JavaScript, you need to convert them into an array, sort it, and then convert an array back into the object.

Take a look at some methods and examples

Step1: Using Object.keys()

This method is used to get an array of keys of the object. The Object.keys() method doesn’t modify the original object instead it creates a new object with a sorted pair of key values.

let product = {
  name: 'Led table lamp',
  id: 06817,
  price: '150$',
  material: 'Plastic'
}

let sort = Object.keys(product).reduce((accumulator, current)=>{
  accumulator[current] = product[current];
  return accumulator;
}, {});

console.log(sort);

Output

With this method, you get an array whose elements are keys of an object

Code Explanation

let product = {
  name: 'Led table lamp',
  id: 06817,
  price: '150$',
  material: 'Plastic'
}

let keys = Object.keys(product);
console.log(keys);

Output

0: "name"
1: "id"
2: "price"
3: "material"
length: 4

Step 2: Using sort() Method

This is the second step to sorting the keys of objects in JavaScript. We call the array with this method. It sorts the array alphabetically.

let product = ["name", "id", "price", "material"];
product.sort();
console.log(product); //["id", "material", "name", "price"]

This code has a sorted array having keys of an object.

Step 3: Using reduce method()

This is the third step to sort the object keys. In this, we call to iterate through the array that is sorted, and then we can just assign each key and the value of these to the accumulator. It is to remember that the initial value passed to the accumulator must be an empty object.

const cars = {t: 'Toyota', m: 'Mercedes', b: 'BMW'};

// ['b', 'm', 't']
console.log(Object.keys(cars).sort());

const sort = Object.keys(cars)
  .sort()
  .reduce((accumulator, key) => {
    accumulator[key] = cars[key];
    return accumulator;
  }, {});

console.log(sort);

Output

b: "BMW"
m: "Mercedes"
t: "Toyota"

Step 4: Using foreEach Method

This is the last step to iterate over the sorted object with the use of Object.keys() and forEach().

const cars = {t: 'Toyota', m: 'Mercedes', b: 'BMW'};

// ['b', 'm', 't']
console.log(Object.keys(cars).sort());

const sort = Object.keys(cars)
  .sort()
  .reduce((accumulator, key) => {
    accumulator[key] = cars[key];
    return accumulator;
  }, {});

Object.keys(sort).forEach(key => {
  console.log(key, sort[key]);
});

Output

b BMW
m Mercedes
t Toyota

Conclusion

The step-wise methods are discussed to sort the keys of an object in JavaScript. Just follow the steps and get the keys sorted.