JavaScript Loops
A JavaScript nested loop is a loop placed inside another loop.
The outer loop runs once, then the inner loop runs all the way through.
This repeats until the outer loop has finished.
Example
javascript
for (let i = 1; i <= 2; i++) {
for (let j = 1; j <= 3; j++) {
console.log(i + " - " + j);
}
}In this example, the outer loop runs 2 times and the inner loop runs 3 times for each of them.
That gives 6 lines of output in total.
A nested loop is simply one loop written inside the body of another loop.
The inner loop finishes completely before the outer loop moves to its next turn.
Nested loops are used for grids, tables, patterns, and any data that has rows and columns.
Syntax
javascript
for (let i = 0; i < rows; i++) {
for (let j = 0; j < columns; j++) {
// code to run
}
}Use different variable names for each loop, or the inner loop will overwrite the outer one.
The total number of turns is the outer count multiplied by the inner count.
Example
javascript
let count = 0;
for (let i = 1; i <= 3; i++) {
for (let j = 1; j <= 4; j++) {
count++;
}
}
console.log(count);Here, 3 times 4 gives 12, so the inner code runs 12 times.
Nested loops are often used to build simple patterns.
Example
javascript
let result = "";
for (let i = 1; i <= 4; i++) {
let row = "";
for (let j = 1; j <= i; j++) {
row = row + "*";
}
result = result + row + "\n";
}
console.log(result);Here, each row has one more star than the row before it.
A multiplication table is a natural fit for a nested loop.
Example
javascript
for (let i = 1; i <= 3; i++) {
for (let j = 1; j <= 3; j++) {
console.log(i + " x " + j + " = " + (i * j));
}
}Here, the inner loop prints one full row of the table.
You can loop through an array that holds other arrays.
Example
javascript
let grid = [
[1, 2, 3],
[4, 5, 6]
];
for (let row of grid) {
for (let value of row) {
console.log(value);
}
}Here, the outer loop reads each row and the inner loop reads each value in it.
Nested loops let you compare every item in one list with every item in another.
Example
javascript
let names = ["John", "Mary"];
let cities = ["London", "Paris"];
for (let name of names) {
for (let city of cities) {
console.log(name + " - " + city);
}
}Here, every name is paired with every city, giving four lines.
A break or continue only affects the loop it is written in.
A break in the inner loop stops the inner loop, not the outer one.
Example
javascript
for (let i = 1; i <= 3; i++) {
for (let j = 1; j <= 3; j++) {
if (j === 2) {
break;
}
console.log(i + " - " + j);
}
}Here, the inner loop stops when j is 2.
The outer loop still runs all three times.
Every extra level multiplies the amount of work.
Two loops over 1000 items each means a million turns, which can make a page feel slow.
Example
javascript
let items = [1, 2, 3, 4, 5];
for (let i = 0; i < items.length; i++) {
for (let j = i + 1; j < items.length; j++) {
console.log(items[i] + " and " + items[j]);
}
}Here, the inner loop starts at i + 1 so no pair is repeated.
Starting the inner loop later is a simple way to cut the work in half.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Nested Loops</title>
</head>
<body>
<h1>JavaScript Nested Loops</h1>
<p id="result"></p>
<script>
let result = "";
for (let i = 1; i <= 4; i++) {
for (let j = 1; j <= i; j++) {
result += "*";
}
result += "<br>";
}
document.getElementById("result").innerHTML = result;
</script>
</body>
</html>Run the above example in the Try It Editor.
Try changing the outer loop:
Change i <= 4 to i <= 7 and see the pattern grow.
break and continue only affect the loop they are written in.JavaScript nested loops let you work with rows and columns, grids, and pairs of values.
They are powerful, but every extra level multiplies the amount of work the browser has to do.
Understanding nested loops helps you handle two dimensional data and write cleaner JavaScript code.