Home › Courses › For Loop vs For…of Loop with Examples - Break & Continue

For Loop vs For…of Loop with Examples - Break & Continue

20 / 57

What is For...of Loop?

  1. A loop used to iterate over iterable data like:
  2. Strings
  3. Arrays
  4. It gives direct values, not index.


Key Idea

  1. No need for:
  2. Index (i)
  3. Condition (i < length)
  4. Increment (i++)
  5. Works automatically on each value


Syntax


for (let variable of iterable) {
// code
}


Example 1: Using For Loop


let name = "Code Step By Step";

for (let i = 0; i < name.length; i++) {
console.log(name[i]);
}


Example 2: Using For...of Loop


let name = "Code Step By Step";

for (let char of name) {
console.log(char);
}

Output:

C o d e ...

Same output, but simpler code.


Difference: For vs For...of


Uses indexNo index needed
More complexSimple and clean
Manual controlAutomatic iteration
Good for complex logicGood for simple iteration


When to Use

Use For Loop

  1. When you need:
  2. Index control
  3. Complex logic

Use For...of

  1. When you need:
  2. Simple iteration
  3. Direct values


Break in For...of


let name = "abcde";

for (let char of name) {
if (char == "c") {
break;
}
console.log(char);
}

Output:

a b


Continue in For...of


let name = "hello";

for (let char of name) {
if (char == "e") {
continue;
}
console.log(char);
}

Output:

h l l o

(e is skipped)


Important Note

  1. Since there is no index, use value directly in conditions


Common Mistakes

Mistake 1: Expecting Index


for (let i of name) {
console.log(i); // gives value, not index
}

Mistake 2: Using Complex Logic

  1. For...of is not ideal when:
  2. You need index-based control
  3. You want to skip by index

Mistake 3: Wrong Placement of Break/Continue

  1. Place condition before console.log
Share this lesson: