For...In Loop

In the previous topic we saw that for...of does not work on plain objects. That's where for...in comes in.

The for...in loop is designed specifically to loop over the keys of an object. It goes through each property name one by one and gives it to you as a string.

const user = {
  name: "Ali",
  age: 22,
  city: "Lahore"
};

for (const key in user) {
  console.log(key);
}
// name
// age
// city

Simple — every key in the object, one at a time.

Syntax

for (const key in object) {
  // use key or object[key]
}

• key — a string holding the current property name
• object — the object you are looping over

How It Works

Accessing Keys and Values

for...in gives you the key. To get the value, use bracket notation — object[key].

const user = {
  name: "Ali",
  age: 22,
  city: "Lahore"
};

for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}
// name: Ali
// age: 22
// city: Lahore

A Real Example — Displaying a Profile

const profile = {
  username: "ali_dev",
  followers: 1240,
  following: 380,
  posts: 57
};

for (const key in profile) {
  console.log(`${key}: ${profile[key]}`);
}
// username: ali_dev
// followers: 1240
// following: 380
// posts: 57

This is useful when you receive data from an API and want to display every field without hardcoding each property name. The loop adapts to whatever keys exist in the object.

Checking Own Properties — hasOwnProperty

JavaScript objects can inherit properties from their prototype — a concept covered in the Advanced section. In some cases for...in can pick up those inherited properties too, which you usually don't want.

Use hasOwnProperty() to make sure you are only working with properties that belong directly to the object itself.

const car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2022
};

for (const key in car) {
  if (car.hasOwnProperty(key)) {
    console.log(`${key}: ${car[key]}`);
  }
}
// brand: Toyota
// model: Corolla
// year: 2022

For simple objects you create yourself this is rarely an issue. But it is a good habit when working with objects that come from external sources or libraries.

for...in on Arrays — Avoid It

Technically for...in works on arrays because array indexes are just keys — "0", "1", "2" and so on. But you should avoid this.

const fruits = ["apple", "mango", "banana"];

for (const index in fruits) {
  console.log(index);        // "0", "1", "2" — strings, not numbers
  console.log(fruits[index]); // apple, mango, banana
}

Two problems with this:

First — the indexes come back as strings, not numbers. "0", "1", "2" instead of 0, 1, 2. This can cause subtle bugs if you try to do math with them.

Second — if any code has added custom properties to the Array prototype, for...in will pick those up too — giving you unexpected keys alongside your indexes.

// ✅ Use for...of for arrays — clean and correct
for (const fruit of fruits) {
  console.log(fruit);
}

// ✅ Use for...in for objects — that's what it's designed for
for (const key in user) {
  console.log(key);
}

for...in vs for...of — The Clear Rule

These two loops confuse a lot of beginners because they look similar. Here is the simplest way to remember the difference:

const person = { name: "Ali", age: 22 };
const colors = ["red", "green", "blue"];

// for...in → keys → use on OBJECTS
for (const key in person) {
  console.log(key); // name, age
}

// for...of → values → use on ARRAYS
for (const color of colors) {
  console.log(color); // red, green, blue
}

In → keys. Of → values. That's the whole distinction.

A Real Example — Counting Word Frequency

const sentence = "the cat sat on the mat the cat";
const words = sentence.split(" ");
const frequency = {};

for (const word of words) {
  if (frequency[word]) {
    frequency[word]++;
  } else {
    frequency[word] = 1;
  }
}

for (const word in frequency) {
  console.log(`"${word}" appears ${frequency[word]} time(s)`);
}

// "the" appears 3 time(s)
// "cat" appears 2 time(s)
// "sat" appears 1 time(s)
// "on" appears 1 time(s)
// "mat" appears 1 time(s)

This example uses both loops together — for...of to build the frequency object from the array, and for...in to read back the keys and values from that object. Each loop doing exactly what it is best at.

Summary

• for...in loops over the keys of an object as strings
• Use bracket notation object[key] to access the value for each key
• Use hasOwnProperty() to avoid picking up inherited properties
• Do not use for...in on arrays — use for...of instead
• Simple rule — for...in for objects, for...of for arrays