JavaScript ES6+

for...of Loops

Iterate over values - cleaner than traditional for loops

Find videos you like?

Save to resource drawer for future reference!

for...of: Iterate Over Values

The for...of loop iterates over values of iterable objects (arrays, strings, Maps, Sets, etc.). It's cleaner and more intuitive than traditional for loops!

for...of vs for...in

for...of → iterates over values (use with arrays, strings)
for...in → iterates over keys/indexes (use with objects)

Array Iteration

Loop through array values

❌ Old Way - Index-Based

const colors = ['red', 'green', 'blue'];

// Traditional for loop
for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

// forEach (can't break/continue)
colors.forEach(color => {
  console.log(color);
});

✅ for...of - Clean!

const colors = ['red', 'green', 'blue'];

// for...of loop
for (const color of colors) {
  console.log(color);
}

// Can use break/continue!

Array for...of Examples

Iterate over array values

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

String Iteration

Loop through each character

❌ Old Way - charAt()

const text = 'Hello';

// Using charAt()
for (let i = 0; i < text.length; i++) {
  console.log(text.charAt(i));
}

// Or bracket notation
for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}

✅ for...of - Natural!

const text = 'Hello';

// for...of with strings
for (const char of text) {
  console.log(char);
}

// H e l l o

String for...of Examples

Character-by-character iteration

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

for...of vs for...in

Understanding the difference

Critical Difference!

const arr = ['a', 'b', 'c'];

// for...of → VALUES
for (const value of arr) {
  console.log(value);
}
// Output: a b c

// for...in → INDEXES/KEYS
for (const index in arr) {
  console.log(index);
}
// Output: 0 1 2

// With objects
const obj = { x: 1, y: 2, z: 3 };

// for...in → KEYS (use with objects)
for (const key in obj) {
  console.log(key, obj[key]);
}
// Output: x 1, y 2, z 3

// for...of doesn't work with plain objects
// for (const value of obj) {}  // ERROR!

When to Use Which

Choosing the right loop

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Other Iterables

for...of works with Maps, Sets, and more

Works with Many Types!

// Set
const uniqueNumbers = new Set([1, 2, 3, 2, 1]);

for (const num of uniqueNumbers) {
  console.log(num);
}
// Output: 1 2 3

// Map
const userRoles = new Map([
  ['alice', 'admin'],
  ['bob', 'user']
]);

for (const [name, role] of userRoles) {
  console.log(`${name}: ${role}`);
}
// Output: alice: admin, bob: user

// Map.entries()
for (const entry of userRoles.entries()) {
  console.log(entry);
}
// Output: ['alice', 'admin'], ['bob', 'user']

Advanced Iterables Examples

Maps, Sets, and more

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Real-World Example: Data Processing

Practical uses of for...of

javascript

code

DarkEditable

// Filter and transform array
const products = [
  { name: 'Laptop', price: 999, inStock: true },
  { name: 'Mouse', price: 25, inStock: true },
  { name: 'Keyboard', price: 75, inStock: false },
  { name: 'Monitor', price: 299, inStock: true }
];

const availableProducts = [];

for (const product of products) {
  if (product.inStock && product.price < 500) {
    availableProducts.push(product.name);
  }
}

console.log(availableProducts);
// ['Mouse', 'Monitor']

// Process form data
const formData = new FormData();
formData.append('username', 'alice');
formData.append('email', 'alice@example.com');

for (const [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}

// Sum nested arrays
const orders = [
  [10, 20, 30],
  [5, 15],
  [100, 200, 50]
];

let total = 0;

for (const order of orders) {
  for (const amount of order) {
    total += amount;
  }
}

console.log(`Total: $${total}`);  // Total: $430

// Build HTML from data
const users = ['Alice', 'Bob', 'Charlie'];
let html = '<ul>';

for (const user of users) {
  html += `<li>${user}</li>`;
}

html += '</ul>';
console.log(html);

// Process API response
async function processUsers() {
  const response = await fetch('/api/users');
  const users = await response.json();
  
  for (const user of users) {
    if (user.isActive) {
      console.log(`Active user: ${user.name}`);
    }
  }
}

Console Output

Click "Run Code" to see output here...

Key Takeaways

🔄

for...of = VALUES

Iterates over values of iterables
Use with: arrays, strings, Maps, Sets

🔑

for...in = KEYS

Iterates over keys/indexes
Use with: plain objects

⛔

break & continue Work

Unlike forEach(), you can break out of for...of loops early

📦

Works with Iterables

Arrays, strings, Maps, Sets, NodeLists, TypedArrays, and more!

Pro Tip

Use for...of with arrays for cleaner code. Use for...in only with plain objects to iterate over keys.

Previous Topic

Enhanced Object Literals

Shorthand properties, computed keys, and method definitions.

Next Topic

Modules

ES6 import/export for modular code organization.

Ask a Question

Have a question about For...of Loop? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript ES6+

for...of Loops

Iterate over values - cleaner than traditional for loops

Find videos you like?

Save to resource drawer for future reference!

for...of: Iterate Over Values

The for...of loop iterates over values of iterable objects (arrays, strings, Maps, Sets, etc.). It's cleaner and more intuitive than traditional for loops!

for...of vs for...in

for...of → iterates over values (use with arrays, strings)
for...in → iterates over keys/indexes (use with objects)

Array Iteration

Loop through array values

❌ Old Way - Index-Based

const colors = ['red', 'green', 'blue'];

// Traditional for loop
for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

// forEach (can't break/continue)
colors.forEach(color => {
  console.log(color);
});

✅ for...of - Clean!

const colors = ['red', 'green', 'blue'];

// for...of loop
for (const color of colors) {
  console.log(color);
}

// Can use break/continue!

Array for...of Examples

Iterate over array values

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

String Iteration

Loop through each character

❌ Old Way - charAt()

const text = 'Hello';

// Using charAt()
for (let i = 0; i < text.length; i++) {
  console.log(text.charAt(i));
}

// Or bracket notation
for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}

✅ for...of - Natural!

const text = 'Hello';

// for...of with strings
for (const char of text) {
  console.log(char);
}

// H e l l o

String for...of Examples

Character-by-character iteration

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

for...of vs for...in

Understanding the difference

Critical Difference!

const arr = ['a', 'b', 'c'];

// for...of → VALUES
for (const value of arr) {
  console.log(value);
}
// Output: a b c

// for...in → INDEXES/KEYS
for (const index in arr) {
  console.log(index);
}
// Output: 0 1 2

// With objects
const obj = { x: 1, y: 2, z: 3 };

// for...in → KEYS (use with objects)
for (const key in obj) {
  console.log(key, obj[key]);
}
// Output: x 1, y 2, z 3

// for...of doesn't work with plain objects
// for (const value of obj) {}  // ERROR!

When to Use Which

Choosing the right loop

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Other Iterables

for...of works with Maps, Sets, and more

Works with Many Types!

// Set
const uniqueNumbers = new Set([1, 2, 3, 2, 1]);

for (const num of uniqueNumbers) {
  console.log(num);
}
// Output: 1 2 3

// Map
const userRoles = new Map([
  ['alice', 'admin'],
  ['bob', 'user']
]);

for (const [name, role] of userRoles) {
  console.log(`${name}: ${role}`);
}
// Output: alice: admin, bob: user

// Map.entries()
for (const entry of userRoles.entries()) {
  console.log(entry);
}
// Output: ['alice', 'admin'], ['bob', 'user']

Advanced Iterables Examples

Maps, Sets, and more

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Real-World Example: Data Processing

Practical uses of for...of

javascript

code

DarkEditable

const availableProducts = [];

for (const product of products) {
  if (product.inStock && product.price < 500) {
    availableProducts.push(product.name);
  }
}

console.log(availableProducts);
// ['Mouse', 'Monitor']

// Process form data
const formData = new FormData();
formData.append('username', 'alice');
formData.append('email', 'alice@example.com');

for (const [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}

// Sum nested arrays
const orders = [
  [10, 20, 30],
  [5, 15],
  [100, 200, 50]
];

let total = 0;

for (const order of orders) {
  for (const amount of order) {
    total += amount;
  }
}

console.log(`Total: $${total}`);  // Total: $430

// Build HTML from data
const users = ['Alice', 'Bob', 'Charlie'];
let html = '<ul>';

for (const user of users) {
  html += `<li>${user}</li>`;
}

html += '</ul>';
console.log(html);

Console Output

Click "Run Code" to see output here...

Key Takeaways

🔄

for...of = VALUES

Iterates over values of iterables
Use with: arrays, strings, Maps, Sets

🔑

for...in = KEYS

Iterates over keys/indexes
Use with: plain objects

⛔

break & continue Work

Unlike forEach(), you can break out of for...of loops early

📦

Works with Iterables

Arrays, strings, Maps, Sets, NodeLists, TypedArrays, and more!

Pro Tip

Use for...of with arrays for cleaner code. Use for...in only with plain objects to iterate over keys.

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Enhanced Object Literals

Modules

JavaScript Code Editor

Building Your Learning Module...

for...of Loops

for...of: Iterate Over Values

for...of vs for...in

❌ Old Way - Index-Based

✅ for...of - Clean!

Array for...of Examples

❌ Old Way - charAt()

✅ for...of - Natural!

String for...of Examples

Critical Difference!

When to Use Which

Works with Many Types!

Advanced Iterables Examples

Real-World Example: Data Processing

Key Takeaways

for...of = VALUES

for...in = KEYS

break & continue Work

Works with Iterables

Pro Tip

Enhanced Object Literals

Modules

JavaScript Code Editor

for...of Loops

for...of: Iterate Over Values

for...of vs for...in

❌ Old Way - Index-Based

✅ for...of - Clean!

Array for...of Examples

❌ Old Way - charAt()

✅ for...of - Natural!

String for...of Examples

Critical Difference!

When to Use Which

Works with Many Types!

Advanced Iterables Examples

Real-World Example: Data Processing

Key Takeaways

for...of = VALUES

for...in = KEYS

break & continue Work

Works with Iterables

Pro Tip