DEV Community

Cover image for CODING BYTES: PART 5 — Loops
Waqar Mohammad
Waqar Mohammad

Posted on

5

CODING BYTES: PART 5 — Loops

What is a Loop?

In programming, loops are used to perform repeated tasks based on a set condition. As an example, if we wanted to run a piece of code x amount of times.

'for' Loop

    // A random array with my items from my football kit
    const kit = ['Sweater', 'Shorts', 'Socks', 'Ball'];

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

    /*
    Breakdown
    for (begin; condition; step) {
        // ... loop body ...
    }
    */
Enter fullscreen mode Exit fullscreen mode

The for loop is the most commonly used and it can be tricky to understand what is going on at first, but lets break it down. Firstly, look at the syntax which is like an if statement. You have the for keyword, followed by parentheses for the conditions and the curly braces for the code that will be looped.

  • const kit = ['Sweater', 'Shorts', 'Socks', 'Ball'];
    We are declaring an array to loop over (which is just another way of saying checking through / going through).

  • for Similar to if, we are starting the for loop

  • (let i = 0; i < kit.length; i++)
    This is where it gets a little confusing. For me, the i was the part which didn't click. So we can start with that. The i can be any letter or word, it is just used similar to a variable to indicate the element in question.

  • Looking at the example above, when we declare i = 0, we are asking the loop to begin at point 0 in the array, which will be the beginning (sweater). (To see why 0 is at the first item you can read this article).

  • i < kit.length is setting our condition stating while i is less than the length of our kit array, carry on looping.

  • Finally i++ is the step to be taken on each loop. In our example, after each loop we want i to increment by one.

  • { console.log(kit[i]); }
    Within the loop body, we are asking it to console.log() the element on each iteration of the loop.

  • Specifically the kit[i] is referring to each element of the array, where kit is our array and [i] is pointing to the element.

😬 It may be a little crazy at first, but run through it a few times then try typing the example code out and watch the console for the output. There is also a for/in loop which we will cover in the future, enough 🤯 for now.

'while' Loop

 let i = 0;
    while(i < 4){
        console.log(i)
        i++;
    }

    /* 
    Breakdown
    while (condition){
        code
        loop
    }
    */
Enter fullscreen mode Exit fullscreen mode

Just be careful with ALL loops as you could end up running an endless loop if all the elements are not input correctly.

With the while loop you can see the similarities in structure and syntax. These are less common but once you've understood the for loop it should make sense enough. 😉

As loops can be awkward to get to grips with, practice as much as possible. Why not try out the tasks below?

Further Learning

  for (let i = 0; i < 10; i++) {
        console.log( i );
    }
Enter fullscreen mode Exit fullscreen mode
  1. Read the code above and write down what you think it will output before coding it yourself.

  2. Change the for loop in to a while loop.

If you get stuck drop me a tweet 😃. Good Luck and happy coding!

This will be the last part of Coding Bytes for this year. For those celebrating, have a great time, see you next year. Happy holidays! 🎄


Thanks for reading. To keep up with my coding journey come say hi 👋 on twitter or on our #devNewbie Discord server where we have a friendly group of learners sharing their experiences.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (1)

Collapse
 
hsolatges profile image
hsolatges • Edited

May I ask why you choose to merely present the quite deprecated for(let …;…;…) in a es6 context?

If your article target very es6 beginners, then for(const … of …) is way better/easier than the old loop style.

And if you stick with the current one, may you present why it is useful, what features it has. In 2018, in a es6 context, I think you should justify the use of if(let …;…;…).

Also, you could loose the brackets in single line statement;

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay