DEV Community

Cover image for πŸ₯³ Master JavaScript Loops with Fun Pattern Examples
TAQUI ⭐
TAQUI ⭐

Posted on

3 1 1 1 1

πŸ₯³ Master JavaScript Loops with Fun Pattern Examples

Welcome Guys

Welcome Guys, My name is Md Taqui Imam i am a Full Stack developer
And in Today post i will tell you about JavaScript Loops.

Loops are super important in JavaScript.

This blog will show you 13 cool looping patterns in a way that even a beginner can even understand. By the end you'll be looping like a pro!

So, Let's Begin , and Don't Forget to:

Follow me in Github

StartπŸ‘‡

πŸƒ Count to 10

A basic counting loop:

for (let i = 1; i <= 10; i++) {
  console.log(i);
}
Enter fullscreen mode Exit fullscreen mode

πŸš— Drive in Reverse

Count backwards from 10 to 1:

for (let i = 10; i >= 1; i--) {
  console.log(i);
}
Enter fullscreen mode Exit fullscreen mode

🍎 Pick Fruit from a Basket

Loop through an array of fruits:

const fruits = ['apple', 'banana', 'cherry'];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
Enter fullscreen mode Exit fullscreen mode

πŸ₯ž Make Pancakes

Nested loop to make a 5x5 pancake grid:

for (let i = 1; i <= 5; i++) {
  for (let j = 1; j <= 5; j++) {
    console.log(i, j); 
  }
}
Enter fullscreen mode Exit fullscreen mode

πŸƒβ€β™€οΈ Keep Running Until Tired

While loop that runs 5 times:

let count = 1;
while (count <= 5) {
  console.log(count);
  count++;
}
Enter fullscreen mode Exit fullscreen mode

🚢 March Once Before Checking

Do-while loop that always runs 1 time:

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);
Enter fullscreen mode Exit fullscreen mode

πŸƒ Skip 3

Continue on iteration 3 of a for loop:

for (let i = 0; i < 5; i++) {
  if (i === 3) continue;
  console.log(i);
}
Enter fullscreen mode Exit fullscreen mode

πŸ›‘ Stop at 3

Break out of a loop when i equals 3:

for (let i = 0; i < 5; i++) {
  if (i === 3) break;
  console.log(i);
}
Enter fullscreen mode Exit fullscreen mode

🀹 Juggle Numbers

Sum all items in an array:

const nums = [1, 2, 3];
let total = 0;
for (let i = 0; i < nums.length; i++) {
  total += nums[i];
}
console.log(total);
Enter fullscreen mode Exit fullscreen mode

πŸ§‘β€πŸ« Teacher's Assistant

Loop through object properties:

const teacher = {
  name: 'James', 
  age: 30
};
for (let prop in teacher) {
  console.log(prop);
}
Enter fullscreen mode Exit fullscreen mode

🀸 Flip and Flop

Loop backwards and forwards:

for (let i = 10; i >= 0; i--) {
  console.log(i);
}
for (let i = 0; i <= 10; i++) {
  console.log(i);
}
Enter fullscreen mode Exit fullscreen mode

πŸ₯ž Pancake Bonanza

Reusable pancake making function:

function makePancakes() {
  for (let i = 0; i < 5; i++) {
    for (let j = 0; j < 5; j++) {
      console.log(i, j);
    } 
  }
}

makePancakes();
Enter fullscreen mode Exit fullscreen mode

πŸ€Έβ€β™‚οΈ Looping Gymnastics

Recursion:

function countDown(num) {
  if (num < 0) return;
  console.log(num);
  countDown(num - 1);
}

countDown(5);
Enter fullscreen mode Exit fullscreen mode

πŸƒ Keep Practicing Loops!

The more you practice different looping patterns the better you'll get. Soon you'll be an expert loop master!

I hope you like this Blog Post, please drop a Like πŸ’–πŸ”₯πŸ¦„
And Comment if you have any doubt.

Thankyou for reading🀝

Happy Coding😊

Follow me in Github

Top comments (3)

Collapse
 
jodoesgit profile image
Jo β€’

Taqui, you seem to always be doing something fun. It's very cute. I'm glad you're hitting multiple levels of experience on this site. Keep-a-going!

Collapse
 
taqui_786 profile image
TAQUI ⭐ β€’ β€’ Edited

Thank you so much, Jo! 😊

I really enjoy being part of this community and sharing insights.

Your encouragement means a lot! ** I'll definitely keep it up. πŸš€**

Collapse
 
jodoesgit profile image
Jo β€’

Yeah, buddy =)~