JavaScript for-in Statement

Google+ Pinterest LinkedIn Tumblr +

Introduction
JavaScript for…in statement. Do you know how to use it? Do you know when to use it? I show you how and when to use it in this article. You need basic knowledge in JavaScript to understand this article.

The for Statement
We start by looking at the JavaScript for statement, which I assume you already know. The for statement or for loop is normally used for iteration. The syntax for the for statement is:

for ([initial-expression]; [condition]; [increment-expression])
{
statements
}

The initial-expression is typically a variable declaration, something like,

var i=0;

The condition is evaluated for each iteration. It can either return true or false. If it returns true, the statements inside the curly braces are performed. If it returns false, the statements in the curly braces are not performed. It can be something like,

i<5;

This condition actually means, while i is less than 5.

The increment-expression is generally used to increment, the variable, i. You have something like this:

i++;

Let us now consider an example: The following code simply displays the iteration number (try the code and do not forget to click the OK button of the alert box to see the next number).

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

How and when to use the for…in Statement
The for…in statement is the same as the for statement but the condition and the increment-expression are replaced by an array or a container (see below). Let us look at an example first before we continue.

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

In the above code, you have an array. The first element of the array is ‘A’, the second is ‘B’, third is ‘C’, fourth is ‘D’ and fifth is ‘E’. There are 5 elements in the array, meaning we have 5 iterations like in the previous case. Array index counting begins from zero. So the iteration for the array is from zero to 4, just like in the previous case. So, instead of writing the condition and the increment-expression in the parentheses we simply write the array.

In the first code we have the initial-expression as “var i=0”. Now, this is actually the declaration of a variable, i and initialization of it. This variable is also a counter. It counted from zero to 4. In the second code, we declared the same variable for the same purpose, but did not initialize it. In the second code, the word “in” means that the variable is a counter (iterator) for the array.

The syntax for the for…in statement is then

for (var i in container)
{
statements
}

where i is any valid identifier, and the container is either a JavaScript array, or an HTML DOM container.

Conclusion
The for…in statement is used when you want to iterate over an array or container. The for statement is used for arbitrary iterations. The for statement can still be used for an array or container, but the for…in has been established for arrays and containers. JavaScript expects us to use the for…in statement when we want to iterate over an array or a container.

Chrys

Share.

About Author

Leave A Reply