'for in' Loop

Introduction to JavaScript 'for in' Loop

The `for in` loop is a type of loop in JavaScript that is used to iterate over the properties of an object. It is often used when you need to loop through the keys or properties of an object and perform some action on each one. Unlike other loops like `for` and `while`, the `for in` loop is specifically designed to work with objects.

Syntax

The syntax for the `for in` loop is as follows:

for (variable in object) {
  // code to be executed
}

The `variable` represents a temporary variable that will hold the key of each property in the object. The `object` is the object that you want to iterate over.

Example

Let's take a look at an example to understand how the `for in` loop works:

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};
 
for (let key in person) {
  console.log(key + ': ' + person[key]);

}

In this example, we have an object `person` with three properties: `name`, `age`, and `gender`. The `for in` loop iterates over each property of the `person` object, and on each iteration, it prints the key and value of the property using the `console.log` statement.

The output of the above code will be:

name: John
age: 30

gender: male

Ordered like an object

Are objects ordered? In other words, if we loop over an object, do we get all properties in the same order they were added?

The short answer is: No, integer properties are sorted, others appear in creation order.

As an example, let’s consider an object with the phone codes:

let codes = {
  "49": "Germany",
  "41": "Switzerland",
  "44": "Great Britain",
  // ..,
  "1": "USA"
};
 
for (let code in codes) {
  alert(code); // 1, 41, 44, 49

}

Here if we run the code, we see a totally different picture.

• USA (1) goes first
• then Switzerland (41) and so on.

It is because they are integers. So we see 1, 41, 44, 49.

Integer properties? What’s that?

The “integer property” term here means a string that can be converted to-and-from an integer without a change.

In short, "49" is an integer property, but "+49" or "1.2" is not. For example:

// Number(...) explicitly converts to a number
 
// Math.trunc is a built-in function that removes the decimal part
 
alert( String(Math.trunc(Number("49"))) ); // "49", same, integer property
 
alert( String(Math.trunc(Number("+49"))) ); // "49", not same, means "+49" ⇒ not integer property
 
alert( String(Math.trunc(Number("1.2"))) ); // "1", not same, means "1.2" ⇒ not integer property

If the keys are non-integer, then they are listed in the creation order, for instance:

let user = {
  name: "John",
  surname: "Smith"
};
user.age = 25; // add one more
 
// non-integer properties are listed in the creation order
for (let prop in user) {
  alert( prop ); // name, surname, age

}

So, to fix the issue with the phone codes(integer values), we can “cheat” by making the codes non-integer. Adding a plus "+" sign before each code is enough.

Like this:

let codes = {
  "+49": "Germany",
  "+41": "Switzerland",
  "+44": "Great Britain",
  // ..,
  "+1": "USA"
};
 
for (let code in codes) {
  alert( +code ); // 49, 41, 44, 1

}

Now it works as intended.

Key Takeaways

• The `for in` loop is used to iterate over the properties of an object.
• The syntax of the `for in` loop consists of a variable to hold the key and the object to iterate over.
• Each iteration of the `for in` loop assigns the key of the current property to the variable.
• The `for in` loop is particularly useful when working with objects and you need to perform some action on each property.
• If the keys are non-integer, then they are listed in the creation order.
• If the keys are integer, then adding a plus "+" sign before each key, only then they will be listed in the creation order.