Difference Between ( For… In ) and ( For… Of ) Statements?

Difference between (for…in) and (for…of) statements?

When working with JavaScript, you may come across situations where you need to iterate over elements in an array or properties in an object. JavaScript provides two different statements for looping through these elements: (for…in) and (for…of). While they may seem similar, there are important differences between them that you should be aware of.

(for…in) statement

The (for…in) statement is used to iterate over the properties of an object. It loops through all enumerable properties, including those inherited from the object’s prototype chain. Here’s an example:

const person = {
  name: 'John',
  age: 30,
  occupation: 'Developer'
};

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

This will output:

name: John
age: 30
occupation: Developer

As you can see, the (for…in) statement iterates over each property of the object, giving you access to both the property name and its corresponding value.

(for…of) statement

The (for…of) statement, introduced in ECMAScript 6, is used to iterate over the values of an iterable object, such as an array or a string. It does not iterate over object properties. Here’s an example:

const numbers = [1, 2, 3, 4, 5];

for (let number of numbers) {
  console.log(number);
}

This will output:

1
2
3
4
5

As you can see, the (for…of) statement simplifies the process of iterating over array elements, giving you direct access to each value without the need to access it through an index.

Which one to use?

Now that you understand the basic differences between (for…in) and (for…of) statements, you might be wondering which one to use in different scenarios.

Use (for…in) when you need to iterate over object properties, including inherited ones. This is useful when you want to perform operations on each property or access both the property name and its value.

Use (for…of) when you need to iterate over the values of an iterable object, such as an array or a string. This is useful when you only need to access the values and don’t require information about the index or the property name.

It’s important to note that (for…of) cannot be used with regular objects, as they are not iterable by default. However, you can use it with objects that implement the iterable protocol, such as arrays or strings.

Now that you understand the differences between (for…in) and (for…of) statements, you can choose the appropriate one based on your specific requirements.