*
Previous Javascript Loops Javascript-Functions Next

Break & Continue and Ternary operator in JavaScript

📘 Break & Continue in JavaScript

1️⃣ break Statement

The break statement is used to exit a loop immediately when a certain condition is met. It stops the loop entirely and moves control to the next statement after the loop.

// Example: Stop loop when i = 5
for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break; // exit loop
  }
  console.log(i);
}
// Output: 1 2 3 4
  

2️⃣ continue Statement

The continue statement is used to skip the current iteration of the loop and move to the next one. The loop itself does not end.

// Example: Skip even numbers
for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    continue; // skip this iteration
  }
  console.log(i);
}
// Output: 1 3 5 7 9
  

3️⃣ break vs continue

Feature break continue
Effect Exits the loop completely Skips current iteration, continues loop
Use Case When you want to stop looping early When you want to skip certain values

4️⃣ Using break in while Loop

let n = 1;
while (n <= 10) {
  if (n === 6) {
    break;
  }
  console.log(n);
  n++;
}
// Output: 1 2 3 4 5
  

5️⃣ Using continue in while Loop

let m = 0;
while (m < 10) {
  m++;
  if (m % 3 === 0) {
    continue; // skip multiples of 3
  }
  console.log(m);
}
// Output: 1 2 4 5 7 8 10
  

✅ Quick Recap

  • break → exits the loop entirely.
  • continue → skips current iteration, continues loop.
  • Both can be used in for, while, and do…while loops.

📌 Mini Project: Find First Even Number

let numbers = [3, 7, 11, 8, 15, 20];

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    console.log("First even number is: " + numbers[i]);
    break; // stop after finding first even
  }
}
  

📘 Ternary Operator in JavaScript

1️⃣ Definition

The ternary operator is a shorthand for if...else. It is the only JavaScript operator that takes three operands.

Syntax:

condition ? expressionIfTrue : expressionIfFalse

2️⃣ Basic Example

let age = 18;
let status = (age >= 18) ? "Adult" : "Minor";
console.log(status); // "Adult"
  

3️⃣ Nested Ternary

You can chain ternary operators, but it can reduce readability.

let marks = 75;
let grade = (marks >= 90) ? "A" 
           : (marks >= 75) ? "B" 
           : (marks >= 50) ? "C" 
           : "F";
console.log(grade); // "B"
  

4️⃣ Using in Functions

function checkAge(age) {
  return (age >= 18) ? "Eligible to vote" : "Not eligible";
}
console.log(checkAge(20)); // "Eligible to vote"
console.log(checkAge(15)); // "Not eligible"
  

5️⃣ Real-World Example

let isLoggedIn = true;
let message = isLoggedIn ? "Welcome back!" : "Please log in.";
console.log(message); // "Welcome back!"
  

✅ Quick Recap

  • Shorthand for if...else.
  • Syntax: condition ? trueValue : falseValue.
  • Can be nested, but avoid overuse for readability.
  • Great for inline decisions (assignments, return values).

📌 Mini Project: Guess the Number Game

This mini project demonstrates a simple number guessing game using JavaScript in the browser console.

✅ Example Code:

// Generate a random number between 1 and 100
let secretNumber = Math.floor(Math.random() * 100) + 1;
let guess;

while(guess !== secretNumber) {
  guess = Number(prompt("Guess a number between 1 and 100:"));
  if(guess < secretNumber) {
    console.log("Too low! Try again.");
  } else if(guess > secretNumber) {
    console.log("Too high! Try again.");
  } else if(guess === secretNumber) {
    console.log("Congratulations! You guessed the number: " + secretNumber);
    break;
  } else {
    console.log("Invalid input. Please enter a number.");
  }
}

🎯 How it Works:

  1. A random number is generated between 1 and 100.
  2. The user is prompted to guess the number.
  3. Feedback is provided: too high, too low, or correct.
  4. The loop continues until the correct number is guessed.

Try running this code in the browser console and test your guessing skills!

Back to Index
Previous Javascript Loops Javascript-Functions Next
*
*