Iterating over Arrays and Objects0%
Iterating over Arrays and Objects
Beginner12 min read•Updated: Jul 11, 2026
Iterating over Arrays and Objects in JavaScript
Iterating (looping) through data collections is one of the most frequent tasks in frontend and backend engineering. Modern JavaScript provides specialized iteration constructs tailored specifically for arrays and objects.
1. Iterating Over Arrays
A. The Modern for...of Loop (Recommended for Values)
Iterates directly over the values of any iterable (Arrays, Strings, Sets):
JavaScript
const colors = ["Red", "Green", "Blue"];
for (const color of colors) {
console.log(color);
}
// "Red", "Green", "Blue"
B. The Array .forEach() Method
Functional iteration taking a callback:
JavaScript
colors.forEach((color, index) => {
console.log(`Index ${index}: ${color}`);
});
2. Iterating Over Objects: The Holy Trinity of Static Methods
Because objects are not directly iterable with for...of, modern JavaScript provides three static methods on Object:
Output
const course = { title: "Next.js", price: 499, level: "Advanced" };
Object.keys(course) --> ["title", "price", "level"] (Array of keys)
Object.values(course) --> ["Next.js", 499, "Advanced"] (Array of values)
Object.entries(course) --> [["title", "Next.js"], ["price", 499], ["level", "Advanced"]]
1. Object.keys(): Looping through keys
JavaScript
for (const key of Object.keys(course)) {
console.log(`Key: ${key}, Value: ${course[key]}`);
}
2. Object.values(): Looping through values directly
JavaScript
for (const val of Object.values(course)) {
console.log(`Value: ${val}`);
}
3. Object.entries() with Array Destructuring (Most Elegant!):
JavaScript
for (const [key, value] of Object.entries(course)) {
console.log(`${key.toUpperCase()}: ${value}`);
}
// TITLE: Next.js
// PRICE: 499
// LEVEL: Advanced
3. The for...in Loop (Object Keys & Caution)
The for...in loop iterates over all enumerable property keys of an object:
JavaScript
const car = { make: "Toyota", model: "Corolla", year: 2024 };
for (const key in car) {
console.log(`${key}: ${car[key]}`);
}
Important Warning
[!WARNING]
Avoid using
for...in on Arrays!
for...in iterates over property names (as strings, like "0", "1"), does not guarantee numerical order, and can traverse prototype chain properties. For arrays, always use for...of or standard for loops!4. Summary Matrix: Which Loop Should You Use?
| Data Structure | Best Modern Choice | Alternative |
|---|---|---|
| Array | for...of or .forEach() | Standard for (let i = 0; ...) |
| Object | Object.entries() with for...of | Object.keys() or for...in |
| String | for...of | Standard for loop |
Interactive Quiz
Practice Quiz
Question 1
Which loop syntax directly iterates over the elements/values of an array without needing an index counter?
Question 2
What does
Object.entries(user) return?Question 3
Why should you avoid using
for...in to iterate through arrays?Question 4
What does
Object.keys({ a: 1, b: 2 }) return?Question 5
Can you break out of an
array.forEach() loop using the break keyword?Next Lesson
Working with Date Object
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Related Lessons
| Previous Lesson | Next Lesson |
|---|---|
| Object Basics and Properties | Working with Date Object |
Practice Quiz
Test your understanding of this lesson with 5 questions. Each question has one correct answer.