For-In Statement with Object in TypeScript

In TypeScript, an object contains the properties and their values. We can use the for-in loop statement to iterate through every property of the objects and get its value.

This tutorial will teach us to iterate through the object key-value pairs via different examples. Also, we will learn what kind of error we can get while iterating through the object properties and how to fix it quickly.

Syntax

Users can follow the syntax below to iterate through the iterable object properties using the for-in loop statement.

For (var_name in object){
   Statements or block to execute;
}

Now, we will look at different examples to iterate through the object properties.

Steps

• Step 1 − Define an object with different properties.

• Step 2 − Iterate through the object using for…in statement to access the object’s keys.

• Step 3 − Print the object’s properties.

Example 1

In the example below, we have created the student object, which contains the students_name, age, and role property. We used the for-in loop statement to access the student object's keys. After accessing the key, we also accessed the value for the particular key.

// defining the student object
const student = {
   student_name: "Shubham",
   role: "Content writer",
   age: 22,
};

// iterating through the student object
for (const key in student) {
   console.log("The " + key + " of the student is " + object[key]);
}

On compiling, it will generate the following JavaScript code −

// defining the student object
var student = {
   student_name: "Shubham",
   role: "Content writer",
   age: 22
};

// iterating through the student object
for (var key in student) {
   console.log("The " + key + " of the student is " + student[key]);
}

Output

The above code will produce the following output −

The student_name of the student is Shubham
The role of the student is Content writer
The age of the student is 22

Now let’s define an object of a particular type that also contains the methods and array as a property value.

We will follow the below steps in the next example −

• Step 1 − Create an interface named Table.

• Step 2 − Defined the brand and color properties of string type in the Table interface. Also, define the sizes property of the number’s array, and the get_price() method returns the table price.

• Step 3 − Create the table_obj of type Table, initialize its properties with proper values, and define the get_price() method.

• Step 4 − Use the for-in loop to iterate through every key of the table_obj.

• Step 5 − Inside the for-in loop, access the value of a particular key using the object name and square bracket notation. Also, print the key-value pair in a formatted way.

Example 2

The below example demonstrates an object of a particular type that also contains the methods and array as a property value. In the output, we can see that the value of the get_price property is a whole function, and the value of the sizes is an array of numbers.

// Creating the table interface
interface Table {
   brand: string;
   color: string;
   sizes: Array<number>;
   get_price(): number;
}
// creating the table_obj of type Table
let table_obj: Table = {
   brand: "woodBrand",
   color: " grey",
   sizes: [10, 40, 30, 20],
   get_price(): number {
      return 10;
   },
};
// Iterating through the table_obj
for (let key in table_obj) {
   console.log("The value of " + key + " in table_obj is " + table_obj[key]);
}

On compiling, it will generate the following JavaScript code −

// creating the table_obj of type Table
var table_obj = {
   brand: "woodBrand",
   color: " grey",
   sizes: [10, 40, 30, 20],
   get_price: function () {
      return 10;
   }
};
// Iterating through the table_obj
for (var key in table_obj) {
   console.log("The value of " + key + " in table_obj is " + table_obj[key]);
}

Output

The above code will produce the following output −

The value of brand in table_obj is woodBrand
The value of color in table_obj is grey
The value of sizes in table_obj is 10,40,30,20
The value of get_price in table_obj is function () {
   return 10;
}

In this tutorial, users learned to iterate through the object property values using the for-in loop. We have seen two different examples. The first example was very easily created for beginners. The second example also contains the interfac