Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Looping through an array in Javascript
Arrays are linear data structures that store multiple elements in an ordered collection. Each element can be accessed using its index number, starting from 0.
const array_name = [item1, item2, ...]; const movies = ["Bahubali", "RRR", "KGF", "Pushpa"]; // Index values: // Bahubali - [0] // RRR - [1] // KGF - [2] // Pushpa - [3]
Loops are programming constructs that execute a sequence of instructions repeatedly until a specified condition is met. They're essential for iterating through arrays efficiently.
Traditional for Loop
The for loop provides complete control over initialization, condition, and iteration increment.
Syntax
for (statement1; statement2; statement3) {
// code block to be executed
}
Statement 1: Executed once before the loop starts (initialization)
Statement 2: Defines the condition for loop execution
Statement 3: Executed after each iteration (increment/decrement)
Example
<html>
<head>
<title>Using for loop in JavaScript array</title>
</head>
<body>
<script>
const emp_id = [100, 200, 300, 400, 500, 600, 700];
for (let i = 0; i < emp_id.length; i++) {
document.write(emp_id[i]);
document.write("<br>");
}
</script>
</body>
</html>
100 200 300 400 500 600 700
while Loop
The while loop continues executing as long as the specified condition remains true. It's useful when you don't know the exact number of iterations needed.
Example
<html>
<head>
<title>Using while loop in JavaScript array</title>
</head>
<body>
<script>
const emp_id = [1180, 1181, 1182, 1183, 1184, 1185, 1186];
let i = 0;
while (i < emp_id.length) {
document.write(emp_id[i]);
document.write("<br>");
i++;
}
</script>
</body>
</html>
1180 1181 1182 1183 1184 1185 1186
do...while Loop
The do...while loop executes the code block at least once before checking the condition. This guarantees one execution even if the condition is initially false.
Example
<!DOCTYPE html>
<html>
<head>
<title>Using do...while loop in JavaScript array</title>
</head>
<body>
<script>
const emp_id = [1180, 1181, 1182, 1183, 1184, 1185, 1186];
let i = 0;
do {
document.write(emp_id[i]);
document.write("<br>");
i++;
}
while (i < emp_id.length);
</script>
</body>
</html>
1180 1181 1182 1183 1184 1185 1186
for...in Loop
The for...in loop iterates over array indices (keys), providing a cleaner syntax for accessing array elements by their index positions.
Example
<html>
<head>
<title>Using for...in loop in JavaScript array</title>
</head>
<body>
<script>
const emp_id = [7, 10, 18, 17, 45, 99, 333];
for (i in emp_id) {
document.write(emp_id[i]);
document.write("<br>");
}
</script>
</body>
</html>
7 10 18 17 45 99 333
for...of Loop
The for...of loop directly iterates over array values, eliminating the need for index management. This is the most straightforward method for accessing array elements.
Example
<html>
<head>
<title>Using for...of loop in JavaScript array</title>
</head>
<body>
<script>
const prime_num = [2, 3, 5, 7, 11, 13, 17, 19];
for (output of prime_num) {
document.write(output);
document.write("<br>");
}
</script>
</body>
</html>
2 3 5 7 11 13 17 19
Comparison of Loop Methods
| Loop Type | Use Case | Access Method | Syntax Complexity |
|---|---|---|---|
for |
Full control needed | Index-based | Medium |
while |
Condition-based iteration | Manual index | Medium |
do...while |
At least one execution | Manual index | Medium |
for...in |
Index iteration | Index keys | Simple |
for...of |
Direct value access | Direct values | Simplest |
Conclusion
JavaScript offers multiple ways to loop through arrays. Use for...of for simple value iteration, for...in for index access, and traditional for loops when you need complete control over the iteration process.
816 Views
