REFERENCEjavascript

javascript Documentation

📖 INDEX

# what-is-javascript

# function-declaration

# function-expressions

# anonymous-functions

# arrow-functions

# return

# recursive-functions

# arguments-parameters

# array-destructuring

# what-is-dom

# element-selection

# selection-methods

# elements-manipulation

# events

# event-listeners

# modification-methods

LOADING ENGINE...

Loops

AI & DATA SCIENCE // loops

Loops repeat a block of code. JavaScript has for, for...of, for...in, while, and do...while loops.

Syntax

for (let i = 0; i < 5; i++) { ... }
for (const item of array) { ... }
for (const key in object) { ... }
while (condition) { ... }

Deep Dive Course

Loops are fundamental for processing collections and repeating actions. **for** is best for indexed iterations. **for...of** iterates iterable values (arrays, strings, Sets). **for...in** iterates object keys. **while** loops when the count is unknown. **Array methods** (map, forEach, filter) are often cleaner than for loops.

1Understanding Loops

Loops are fundamental for processing collections and repeating actions. for is best for indexed iterations. for...of iterates iterable values (arrays, strings, Sets). for...in iterates object keys. while loops when the count is unknown. Array methods (map, forEach, filter) are often cleaner than for loops.

💡

Prefer for...of over for...in for arrays. for...in also picks up inherited prototype properties.

editor.html

// Classic for loop
for (let i = 0; i < 5; i++) {
  process.stdout.write(i + ' ');
}
// Output: 0 1 2 3 4

// for...of (preferred for arrays)
const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}

localhost:3000

2Practical Example

Here is a real-world application of Loops showing how it is used in production JavaScript code.

editor.html

// for...in for objects
const car = { make: 'Toyota', year: 2022 };
for (const key in car) {
  console.log(`${key}: ${car[key]}`);
}

localhost:3000

3Best Practices

Follow these guidelines when working with Loops:

1. Use for...of for arrays and iterables

2. Use for...in only for plain objects

3. Avoid infinite loops — ensure the condition changes

⚠️

Tip: Prefer for...of over for...in for arrays. for...in also picks up inherited prototype properties.

editor.html

// Classic for loop
for (let i = 0; i < 5; i++) {
  process.stdout.write(i + ' ');
}
// Output: 0 1 2 3 4

// for...of (preferred for arrays)
const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}

localhost:3000

Examples

Example 01Basic Usage

// Classic for loop
for (let i = 0; i < 5; i++) {
  process.stdout.write(i + ' ');
}
// Output: 0 1 2 3 4

// for...of (preferred for arrays)
const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}

Example 02Advanced Example

// for...in for objects
const car = { make: 'Toyota', year: 2022 };
for (const key in car) {
  console.log(`${key}: ${car[key]}`);
}

Best Practices

Use for...of for arrays and iterables
Use for...in only for plain objects
Avoid infinite loops — ensure the condition changes

Interview Question

What is the difference between for...of and for...in?▼

Hint: Values vs keys. Iterables vs enumerable properties.

for...of iterates over the VALUES of any iterable (arrays, strings, Maps, Sets). for...in iterates over the enumerable KEYS (property names) of an object, including inherited properties — which is why it shouldn't be used for arrays.

Exercises

MediumPractice using Loops in a real scenario.

View Solution

// Classic for loop
for (let i = 0; i < 5; i++) {
  process.stdout.write(i + ' ');
}
// Output: 0 1 2 3 4

// for...of (preferred for arrays)
const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}

Frequently Asked Questions

What is the difference between for...of and for...in?▼

Related Functions

forwhiledo-whilebreakcontinueforEach