How to Sort JavaScript Objects by Key
Table of Contents
By default, keys in a JavaScript object are unordered.
This means that the order of the keys in the object is not guaranteed.
You can, however, sort these keys to form a new object.
In this post, we'll learn how to sort a JavaScript object by key.
How to sort a JavaScript object by key
To start, let's create a JavaScript object with some keys and values.
JAVAconst object = {
"name": "John",
"age": 30,
"city": "New York"
};
console.log(object);
BASH{
"name": "John",
"age": 30,
"city": "New York"
}
We can use a combination of built-in functions to take this object, iterate over the keys, sort them, then build up a new object using these ordered keys.
More specifically, we can use Object.keys()
to get the keys in an array, sort()
to sort them, then use reduce()
to iterate through each one and set the key and value to a new object.
JAVASCRIPTconst object = {
"name": "John",
"age": 30,
"city": "New York"
};
const sortObject = object => {
return Object.keys(object).sort().reduce((acc, key) => {
acc[key] = object[key];
return acc;
}, {});
};
const sortedObject = sortObject(object);
console.log(sortedObject);
BASH{
"age": 30,
"city": "New York",
"name": "John"
}
Notice how now the keys are in the order we want them to be, sorted alphabetically.
If you want this code more compactly, this can be accomplished in one line:
JAVASCRIPTconst object = {
"name": "John",
"age": 30,
"city": "New York"
};
const sortObject = object => Object.keys(object).sort().reduce((acc, key) => (acc[key] = object[key], acc), {});
const sortedObject = sortObject(object);
console.log(sortedObject);
BASH{
"age": 30,
"city": "New York",
"name": "John"
}
Conclusion
In this post, we learned how to sort a JavaScript object by key.
Simply use a combination of built-in functions to get the keys from your object, iterate through them one by one to sort them, then use reduce()
to create a new object from it.
Thanks for reading!
- How to Install Node on Windows, macOS and Linux
- Getting Started with Solid
- Managing PHP Dependencies with Composer
- Getting Started with Svelte
- How to build a Discord bot using TypeScript
- How to deploy an Express app using Docker
- Using Puppeteer and Jest for End-to-End Testing
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Using Push.js to Display Web Browser Notifications
- Getting Started with React
- Setting Up Stylus CSS Preprocessor
- Getting Started with Vuex: Managing State in Vue