This content originally appeared on DEV Community and was authored by Aman kumar
Understanding loops is crucial for efficient coding in JavaScript. They allow us to repeat a block of code multiple times based on a given condition. Let's dive deep into the world of for loops, nested loops, and how to handle arrays and control statements like break and continue! 🛤️
🔁 For Loop Fundamentals
for (let i = 1; i <= 10; i++) {
const element = i;
console.log(element);
}
// Output: Will print numbers from 1 to 10.
Breaking It Down:
-
Initialization (
let i = 1): The loop starts withiset to1. -
Condition Check (
i <= 10): Iftrue, the code inside{}runs. -
Increment (
i++): Increases the value ofiafter each iteration. -
Exit Condition: When
i > 10, the loop stops running.
Note: The variable element has block scope, meaning it exists only inside the loop. Accessing it outside will result in an error.
🏆 Conditionals Within For Loops
for (let i = 1; i <= 10; i++) {
const element = i;
if (element == 5) {
console.log("5 is the best number");
}
console.log(element);
}
Output: The loop prints numbers from 1 to 10, with an extra message "5 is the best number" when it reaches 5.
🔄 Nested Loops: Looping Within Loops
for (let i = 2; i <= 10; i++) {
console.log(`Table of ${i} is:`);
for (let j = 1; j <= 10; j++) {
console.log(`${i} * ${j} = ${i * j}`);
}
}
Output: This creates multiplication tables from 2 to 10. The outer loop runs once, and the inner loop runs 10 times for each iteration of the outer loop.
📚 Working with Arrays and For Loops
let myArr = ["IronMan", "Thor", "Captain America"];
for (let index = 0; index < myArr.length; index++) {
const element = myArr[index];
console.log(element);
}
Explanation: The loop runs from index = 0 to index < myArr.length (i.e., 3). It prints each superhero's name from the array myArr.
🚦 Break & Continue Keywords: Controlling the Loop Flow
for (let i = 1; i <= 10; i++) {
if (i == 5) {
console.log("Detected 5");
// break; // Uncommenting this will stop the loop entirely at 5
continue; // Skips the current iteration and continues with the next one
}
console.log(`Value of i is ${i}`);
}
Break:
- Stops the loop entirely when a certain condition is met.
Continue:
- Skips the current iteration but continues with the loop.
Example Output:
- It prints numbers from
1to10, skipping the number5and printing"Detected 5".
🚀 Key Takeaways
- For Loops are the backbone of iteration in JavaScript, allowing you to execute a block of code repeatedly.
- Nested Loops help perform operations that require multiple levels of iteration.
- Array Handling in loops lets you efficiently access and manipulate data.
- Break and Continue provide fine control over the loop's execution, making your code more efficient and readable.
Mastering these concepts will enhance your problem-solving skills and make your JavaScript code more dynamic and powerful. Ready to loop your way to success? 🔁✨
This content originally appeared on DEV Community and was authored by Aman kumar
Aman kumar | Sciencx (2024-10-16T15:46:43+00:00) **Mastering the Art of Loops in JavaScript: The Complete Guide to For Loops** 🔄✨. Retrieved from https://www.scien.cx/2024/10/16/mastering-the-art-of-loops-in-javascript-the-complete-guide-to-for-loops-%f0%9f%94%84%e2%9c%a8/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.