Skip to main content

For loops, explained.

Published 2021/10/04 14:33

Another one of the absolute basic programming concepts are "loops".

The for loop is one of the most common types of it.

So what is it and how does it work?

Let's explain:

A for loop is basically a way of saying:

Here's a list of stuff, grab each one and do something specific with each one of them

This could be something like:

Here's a list of names, grab each one of them and display them on the screen

Or

Here's a list of text strings, check each one is under 5 characters long

"For" and "for each" loops are created for this very purpose. For example, in Python this is how you'd say:

Here's a list of names, grab each one of them and display them on the screen

names = ["Savvas", "Alice", "Bob"]

for name in names:
    print(name)

In Javascript, there are two ways to do it.

With a "for" loop:

let names = ["Savvas", "Alice", "Bob"]

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

Or with a "for each" loop:

let names = ["Savvas", "Alice", "Bob"]

names.forEach((name) => {
    console.log(name)
})

And to say:

"Here's a list of text strings, check each one is under 5 characters long",

in Javascript we could do:

let textStrings = ["a", "bbb", "cccccc"]

names.forEach((text) => {
    if(text.length < 5){
        console.log("The text is under 5 characters long")
    }
    else{
        console.log("The text is NOT under 5 characters long")
    }
})

In conclusion, "for" and "for each" loops are a straightforward ways to perform an action for each element in an array of strings, numbers or objects.

Dev, Explained (43 part series)

  1. Javascript Scopes, explained.
  2. Javascript Promises, explained.
  3. Accessibility, explained.
  4. React, explained
  5. Should I use forEach() or map()?
  6. Should I use Flexbox or CSS Grid?
  7. Docker, explained.
  8. Unit testing, explained
  9. Git, explained.
  10. Typescript, explained.
  11. async/await, explained.
  12. The DOM, explained.
  13. Regular expressions, explained
  14. GraphQL, explained.
  15. Vue, explained.
  16. Svelte, explained.
  17. API, explained.
  18. Javascript Hoisting, explained.
  19. Immediately Invoked Function Expressions (IIFE), explained.
  20. ARIA roles, explained.
  21. Test-driven Development, explained.
  22. ARIA live regions, explained.
  23. aria-label in accessibility, explained.
  24. Type coercion in Javascript, explained.
  25. Variables, explained.
  26. if statements, explained.
  27. Arrays, explained.
  28. Currying in Javascript, explained.
  29. Memoization, explained.
  30. For loops, explained.
  31. Javascript Prototypes, explained.
  32. React Hooks, explained.
  33. Graph databases, explained.
  34. MongoDB, explained.
  35. Serverless, explained.
  36. Javascript Callback functions, explained.
  37. HTML, explained.
  38. CSS, explained.
  39. Responsive design, explained.
  40. Javascript, explained.
  41. The CSS Box Model, explained.
  42. CSS Flexbox, explained.
  43. CSS Grid, explained.
2022 Savvas Stephanides
Buy me a coffee
Some icons from Freepik