The for...in Loop in JavaScript
When it comes to loops in JavaScript, the for...in
loop is a versatile iteration method that allows us to iterate over the properties of an object.
However, it has a few quirks that we need to be aware of, so let's dive in and explore them.
Take a look at the basic syntax of a for...in
loop:
for (const property in object) {
console.log(property);
}
The for...in
loop will iterate over all countable properties of an object, including those inherited from its prototypes. Consequently, this can lead to unexpected results if we're not careful. To avoid this, we can use Object.hasOwnProperty()
to check if a property is attached directly to the object and not its prototypes.
for...in Loop Examples
Let's take a look at a few practical examples.
Consider the following object:
const cheetah = {
kingdom: "Animalia",
family: "Felidae",
order: "Carnivora"
}
Logging the Properties
Here's how you would use the for...in
loop to log the properties of the cheetah
object:
for (const property in cheetah) {
console.log(property);
}
Output result:
kingdom
family
order
Logging the Values
You can also use the for...in
loop to log the values of the properties in an object:
for (const property in cheetah) {
console.log(cheetah[property]);
}
The output would result in:
Animalia
Felidae
Carnivora
Logging Both Keys and Values
Now, we'll combine both the keys and values of the cheetah
object and log them together:
const cheetah = {
kingdom: "Animalia",
family: "Felidae",
order: "Carnivora"
}
for (const property in cheetah) {
console.log(`${property}: ${cheetah[property]}`);
}
// Output
// kingdom: Animalia
// class: Mammalia
// order: Carnivora
Accessing Nested Properties with String Manipulation
Observe the following nested object structure:
const animal = {
name: "Lion",
scientificName: "Panthera leo",
habitat: {
continent: "Africa",
region: "Savanna"
},
characteristics: {
coat: "golden",
roar: "loud"
},
diet: ["antelopes", "zebras", "buffaloes"]
}
Now, let's access and manipulate the data, including converting the value properties to uppercase:
for (const property in animal) {
if (typeof animal[property] === "string") {
console.log(`${property}: ${animal[property].toUpperCase()}`);
} else if (Array.isArray(animal[property])) {
console.log(`${property}: ${animal[property].join(", ").toUpperCase()}`);
} else {
console.log(`${property}:`);
for (const nestedProperty in animal[property]) {
console.log(` ${nestedProperty}: ${animal[property][nestedProperty].toUpperCase()}`);
}
}
}
The Final Output:
name: LION
scientificName: PANTHERA LEO
habitat:
continent: AFRICA
region: SAVANNA
characteristics:
coat: GOLDEN
roar: LOUD
diet: ANTELOPES, ZEBRAS, BUFFALOES
Using console.dir()
to Debug
Iteration with the for...in
loop can be a bit tricky, especially when it comes to unexpected results due to properties inherited from prototypes.
We can utilize the console.dir()
method to inspect an object and see all its properties, including the inherited ones:
console.dir(animal);
The output in the console will be an interactive tree-like structure enabling us to inspect the properties of an object and potentially locate unexpected inclusions.