JavaScript for...in Loop

What You'll Learn

You’ll learn how to use the for...in loop in JavaScript to iterate over object properties and understand when and how to use it effectively.

Understanding the for...in Loop

Basic syntax of a for...in loop in JavaScript:

for (let key in object) {
  // Code to execute using object[key]
}

for (let key in object) {
  // Code to execute using object[key]
}

• Key variable (key): Represents each property name (key) in the object during iteration.
• Object: The object whose properties you want to loop through.
• Accessing values: Use object[key] to get the value associated with each key.

Example 1: Iterating Over Object Properties

Consider the following object:

const person = {
  name: "Alice",
  age: 25,
  city: "New York"
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}

const person = {
  name: "Alice",
  age: 25,
  city: "New York"
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}

How It Works:

• The for...in loop iterates over all keys in the person object.
• On each iteration, key holds the current property name (like "name").
• person[key] accesses the corresponding value.

Output

name: Alice
age: 25
city: New York

name: Alice
age: 25
city: New York

Example 2: Using for...in with Arrays (Not Recommended)

Although possible, using for...in on arrays is not recommended because it iterates over enumerable properties, which might include unexpected keys or inherited properties. It's better to use for or for...of for arrays.

Here's an example to see why:

const arr = ["a", "b", "c"];
arr.extra = "extra property";

for (let index in arr) {
  console.log(index + ": " + arr[index]);
}

const arr = ["a", "b", "c"];
arr.extra = "extra property";

for (let index in arr) {
  console.log(index + ": " + arr[index]);
}

How It Works:

• The for...in loop iterates over all enumerable keys in the arr object, including array indexes 0, 1, 2.
• It also includes the custom property extra added to the array.
• console.log outputs each key and its corresponding value, including the unexpected property.

Output

0: a
1: b
2: c
extra: extra property

0: a
1: b
2: c
extra: extra property

Notice how extra is included, which can cause unexpected behavior.

Example 3: Checking Object Properties with hasOwnProperty()

When iterating over objects, it’s a good practice to filter out inherited properties using hasOwnProperty(). This ensures you only process the object's own properties.

const person = {
  name: "Alice",
  age: 25,
  city: "New York"
};

for (let key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key + ": " + person[key]);
  }
}

const person = {
  name: "Alice",
  age: 25,
  city: "New York"
};

for (let key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key + ": " + person[key]);
  }
}

How It Works:

• The for...in loop iterates over all enumerable keys in the person object, including inherited ones.
• hasOwnProperty(key) checks whether the property belongs directly to the person object, excluding inherited properties.
• If the property is an own property, the code inside the if block runs, printing the key and its value.
• This avoids processing unwanted inherited properties that might cause bugs.

Output

name: Alice
age: 25
city: New York

name: Alice
age: 25
city: New York

What's Next?

Next, you'll explore the break statement in JavaScript, which is used to exit loops or switch statements early. You'll learn how it helps control the flow of your program by stopping a loop when a specific condition is met, improving efficiency and readability in your code.