Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript Loops

JavaScript for in Loop

Written by Published

The JavaScript for in loop is used to loop through the properties of an object.

The for in loop gives you one property name at a time from an object.

You can then use that name to read the matching value.

Example

Example

javascript

let person = {
  name: "John",
  age: 30,
  city: "London"
};

for (let key in person) {
  console.log(key);
}

In this example, the loop prints the property names.

The output is name, age and city.

What is the for in Loop?

The for in loop repeats once for every property in an object.

On each turn, the variable holds the property name as a string.

It is the easiest way to look at everything inside an object without knowing the property names in advance.

Syntax

Syntax

javascript

for (let key in object) {
  // code to run
}

The word key is just a variable name. You can call it anything you like.

Reading the Values

The loop gives you the property name. To get the value, use square brackets.

Example

Example

javascript

let person = {
  name: "John",
  age: 30,
  city: "London"
};

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

Here, person[key] reads the value for the current property.

Square brackets are used because the property name is stored in a variable.

for in with Arrays

You can use for in with an array, but the variable holds the index as a string.

Example

Example

javascript

let fruits = ["Apple", "Banana", "Mango"];

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

Here, the indexes 0, 1 and 2 are printed with their values.

For arrays, the for of loop is usually a better choice.

for in with Strings

A string also has an index for every character.

Example

Example

javascript

let name = "John";

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

Here, each character is printed with its index.

Counting Properties

The for in loop can be used to count how many properties an object has.

Example

Example

javascript

let car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2021
};

let count = 0;

for (let key in car) {
  count++;
}

console.log("Properties: " + count);

Here, the loop counts three properties.

for in with Nested Objects

You can put one for in loop inside another.

Example

Example

javascript

let students = {
  john: { age: 20, city: "London" },
  mary: { age: 22, city: "Paris" }
};

for (let name in students) {
  console.log(name);

  for (let detail in students[name]) {
    console.log(detail + ": " + students[name][detail]);
  }
}

Here, the outer loop reads each student and the inner loop reads their details.

Skipping Inherited Properties

A for in loop also reads properties that an object inherits.

To read only the object's own properties, use hasOwnProperty.

Example

Example

javascript

let person = {
  name: "John",
  age: 30
};

for (let key in person) {
  if (!person.hasOwnProperty(key)) {
    continue;
  }

  console.log(key + ": " + person[key]);
}

This is a safe habit when you are looping through objects from other code.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript for in Loop</title>
</head>
<body>

  <h1>JavaScript for in Loop</h1>

  <p id="result"></p>

  <script>
    let person = {
      name: "John",
      age: 30,
      city: "London"
    };

    let result = "";

    for (let key in person) {
      result += key + ": " + person[key] + "<br>";
    }

    document.getElementById("result").innerHTML = result;
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try adding a new property to the object:

Add country: "UK" and run it again to see the new line appear.

Important Points

  • The for in loop repeats once for every property in an object.
  • The loop variable holds the property name, not the value.
  • Use object[key] to read the value.
  • With arrays, the loop variable holds the index as a string.
  • Use hasOwnProperty when you want only the object's own properties.

Conclusion

The JavaScript for in loop is used to go through the properties of an object.

It is useful when you do not know the property names in advance.

Understanding for in helps you work with objects and write cleaner JavaScript code.

PreviousJavaScript continue StatementNextJavaScript for of Loop