How to Get Key-Value Pairs of an Object in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Working with key-value pairs from JavaScript objects is essential for data transformation and dynamic processing. As the creator of CoreUI with over 25 years of JavaScript experience, I regularly use this technique for component configuration and data mapping. The most effective method is Object.entries(), which returns an array of key-value pairs as nested arrays.
Use Object.entries() to get an array of key-value pairs from an object.
const config = { theme: 'dark', language: 'en', sidebar: true }
const entries = Object.entries(config)
console.log(entries) // [['theme', 'dark'], ['language', 'en'], ['sidebar', true]]
// Iterate through key-value pairs
entries.forEach(([key, value]) => {
console.log(`${key}: ${value}`)
})
The Object.entries() method returns an array where each element is a two-item array containing a key-value pair. You can use array destructuring [key, value] to easily access both parts. This method is perfect for converting objects to Maps, filtering object properties, or transforming data structures. It only processes the object’s own enumerable properties, ignoring inherited ones.
Best Practice Note:
In CoreUI components, we leverage Object.entries() for dynamic component rendering, configuration validation, and CSS-in-JS style generation. This pattern provides excellent flexibility when building reusable UI components that adapt to various configuration objects.
