The JavaScript break Statement is an important keyword used to alter the flow of a program. Loops are used to execute a certain block of code n number of times until the test condition is false. The break statement is useful when we have to terminate a loop without executing all statements.
JavaScript break Statement
The break Statement is very useful for exiting any loop, such as For, While, and Do While. While executing these loops, if the control encounters the break statement inside them, it will stop running the code block (terminate the current loop) and immediately exit from the loop to execute the statements outside the loop.
The syntax of the JavaScript break Statement is as follows:
break;
NOTE: The break statement is the most important one in the Switch Case. Without using Break, the compiler won’t exit from the Case labels.
JavaScript break Statement Examples
We would like to share two examples to display the working functionality of the Break statement in both the For loop and the While loop.
JavaScript break with a While Loop
We will use the break statement inside the While loop to exit from the loop iteration. Here, we initialized the value of i to 0 at the beginning of the code. Within the While loop, we check whether i is less than or equal to 10. If you have difficulty understanding, please visit our JavaScript while loop article.
Within the while loop, we placed an if condition to test whether i is equal to 4. If the condition is false, it will skip the break statement and print that number as output (In Our case, 0, 1, 2, 3).
If this condition is True, the break statement will execute. Next, the iteration will stop at that number without printing the message.
let i = 0;
while (i <= 10)
{
console.log("The Value of the i Variable = " + i);
i++;
if(i == 4)
{
break;
}
}
console.log("This statement is from Outside and i = " + i);
The Value of the i Variable = 0
The Value of the i Variable = 1
The Value of the i Variable = 2
The Value of the i Variable = 3
This statement is from Outside and i = 4In the following example, the while loop is always true, and we must use the break statement to exit the loop.
let total = 0;
while (true) {
let n = Number(prompt('Enter a number: '));
if (n < 0) {
break;
} else {
total += n;
}
}
console.log(`Sum: ${total}`);
Inside the prompt, we enter the values 5, 10, and 15. Once we enter -1, it will stop showing the prompt and display Sum = 30 inside the web browser console.
Sum: 30JavaScript break for loop
This program uses the break statement inside a for Loop to exit from the loop iteration. Within the for loop, we initialized the value of i as i =10. And we used the Decrement operator to decrement the value by 1. If you have difficulty understanding, please visit our JavaScript for loop article.
Inside the JavaScript for loop, we placed the if condition to test whether i equals 6. If the condition is false, it will skip the break and print that number as output (In Our case, 10, 9, 8, 7).
If this condition is True, then the break statement will be executed. Next, the iteration will stop at that number without printing the other lines.
let i;
for (i = 10; i > 0; i--)
{
if (i == 6)
{
console.log('Coming Out of For Loop Where i = ' + i);
break;
}
console.log('Numbers = ' + i);
}
Numbers = 10
Numbers = 9
Numbers = 8
Numbers = 7
Coming Out of For Loop Where i = 6Using the break statement in do while loop
Similar to the for loop and while loop, we can use the JavaScript break statement inside the do-while loop to terminate the loop.
let i = 1;
let sum = 0;
do {
if (i === 5) {
break;
}
console.log(i);
sum += i;
i++;
} while (i < 10);
console.log(sum);
1
2
3
4
10Using JavaScript break in switch statement
The break statement is the most important functionality in switch case. The break statement terminates a case and stops executing the remaining case labels.
In the following example, if we remove the break statement, it searches for Apples, which is in the second case. So, it starts executing the message inside the Apple case and also executes the orange and default cases.
let fruit = 'Apple';
switch (fruit) {
case 'Kiwi':
console.log('Store has 500 Kiwis!');
break;
case 'Apple':
console.log('Limited Stock of Apples!');
break;
case 'Orange':
console.log('Store has 250 Oranges!');
break;
default:
console.log('Fruit Not available in Store');
}
Limited Stock of Apples!JavaScript break nested loop
When we use the break statement inside a nested loop (two loops), it terminates the inner loop and executes the next iteration of the outer loop.
In the following example, we use the break statement in the nested loop to check whether j equals 3. When j becomes 3, it terminates the inner loop and starts executing the next iteration of the outer loop.
for (let i = 1; i <= 3; i++)
{
for (let j = 1; j <= 10; j++)
{
if (j == 3)
{
break;
}
console.log(`i = ${i}, j = ${j}`);
}
}
i = 1, j = 1
i = 1, j = 2
i = 2, j = 1
i = 2, j = 2
i = 3, j = 1
i = 3, j = 2Let us change the condition from j == 3 to i ==2. It means when the i becomes 2, the break statement in the nested loop exits the control from the inner loop without executing the for loop for j values. Next, it starts the new iteration where I becomes 3.
for (let i = 1; i <= 3; i++)
{
for (let j = 1; j <= 5; j++)
{
if (i == 2)
{
break;
}
console.log(`i = ${i}, j = ${j}`);
}
}
i = 1, j = 1
i = 1, j = 2
i = 1, j = 3
i = 1, j = 4
i = 1, j = 5
i = 3, j = 1
i = 3, j = 2
i = 3, j = 3
i = 3, j = 4
i = 3, j = 5Using JavaScript break statement with labels
When working with the nested loops, we can terminate the outer loop with a labelled break statement. It means we can use the labels for the loops, and use those label names in conjunction with the break statement.
In the following example, we use the same example that we mentioned in the nested loop section. However, we used labels and assigned ouerloop to the main for loop and innerloop to the nested for loop.
Within the nested loop, we applied the break statement with outerloop label to exit the control from the outer loop. So, in the first iteration (i = 1), the control moves to the nested loop.
Inside the nested loop, when j becomes 3, the if statement is evaluated to true and the break statement outerloop terminates the execution and exits from the outer loop. Please refer to the continue statement.
outerloop:for (let i = 1; i <= 3; i++)
{
innerloop:for (let j = 1; j <= 10; j++)
{
if (j == 3)
{
break outerloop;
}
console.log(`i = ${i}, j = ${j}`);
}
}
i = 1, j = 1
i = 1, j = 2