How to Enumerate Object Properties in JavaScript
-
Use
for...into Enumerate Object Properties in JavaScript -
Use
Object.keysto Enumerate Object Properties in JavaScript -
Use
Object.entries()to Enumerate Object Properties in JavaScript -
Use
Underscore.jsto Enumerate Object Properties in JavaScript
This tutorial will teach you different methods that allow you to enumerate the properties of a JavaScript object. These methods will use built-in JavaScript features like for...in, Object.keys, and Object.entries.
Use for...in to Enumerate Object Properties in JavaScript
You can enumerate JavaScript object properties with for...in. However, they are ignored if JavaScript Symbols are a property name.
Also, for...in returns inherited enumerable properties; you can avoid this with the hasOwnProperty() method. The hasOwnProperty() method ensures the properties returned belong to the current object.
In the example code below, we have an object with some properties and values. Also, one of the property names is a JavaScript Symbol.
The result will not include the JavaScript Symbol when you enumerate the Object with for...in.
let Java = Symbol('Java');
let inventors = {
'HTML': 'Sir Tim Berners-Lee',
'JavaScript': 'Brendan Eich',
[Java]: 'James Gosling',
'PHP': 'Rasmus Lerdorf',
'Ruby on Rails': 'DHH',
'Python': 'Guido van Rossum'
}
for (let propName in inventors) {
if (inventors.hasOwnProperty(propName)) {
console.log(propName);
}
}
Output:
HTML
JavaScript
PHP
Ruby on Rails
Python
Use Object.keys to Enumerate Object Properties in JavaScript
You can enumerate object properties by passing the object as an argument to object.keys(). The result is an array of the enumerable property names in order of appearance in the object.
The following code has an object containing days of the week and their numerical value. We want to get the days of the week only, so we use object.keys() on the object.
let daysOfTheWeek = {
'Sunday': 1,
'Monday': 2,
'Tuesday': 3,
'Wednesday': 4,
'Thursday': 5,
'Friday': 6,
'Saturday': 7
}
let daysArray = Object.keys(daysOfTheWeek);
for (let i = 0; i < daysArray.length; i++) {
console.log(daysArray[i]);
}
Output:
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Use Object.entries() to Enumerate Object Properties in JavaScript
Object.entries() returns an array. Each element of this array is an array itself made of the object property name and values.
However, we need the property names. So, we’ll loop through the resulting array to get the property names.
We use Object.keys() on the array in the code below. Afterward, we use a for...of loop to extract the property names.
Please note we are using the same array from the previous section.
let daysOfTheWeek = {
'Sunday': 1,
'Monday': 2,
'Tuesday': 3,
'Wednesday': 4,
'Thursday': 5,
'Friday': 6,
'Saturday': 7
}
let daysArray = Object.entries(daysOfTheWeek);
for (const [propName, propValue] of daysArray) {
console.log(`${propName}`);
}
Output:
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Use Underscore.js to Enumerate Object Properties in JavaScript
Underscore.js has a .keys() method to return the object properties as an array. However, since you want to enumerate the properties, you need to loop through the array.
You can list the property names during the loop, one after the other.
In the following code, we are using Underscore.js via a CDN. When Underscore.js downloads and become available for our script, we use its .keys() method.
<body>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.2/underscore-min.js"
integrity="sha512-anTuWy6G+usqNI0z/BduDtGWMZLGieuJffU89wUU7zwY/JhmDzFrfIZFA3PY7CEX4qxmn3QXRoXysk6NBh5muQ==" crossorigin="anonymous"
referrerpolicy="no-referrer"
>
</script>
<script>
let daysOfTheWeek = {
"Sunday": 1,
"Monday": 2,
"Tuesday": 3,
"Wednesday": 4,
"Thursday": 5,
"Friday": 6,
"Saturday": 7
}
let underscore = _;
let days = _.keys(daysOfTheWeek);
days.forEach((propKey, propValue) => {
console.log(propKey);
});
</script>
</body>
Output:
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn