DEV Community

Dani
Dani

Posted on • Edited on

For loop

We have all been new to code at some point in our lives. Some more recently than others. I am on the more recent side of learning to code and have had my mind blown by some of the concepts I have come across. Learning is fun! But it can also be difficult. Some of the most basic concepts that can be the most frustrating to learn for a newbie. For me, the first (first of many, and more to come I'm sure) frustrating concept was the java script for loop.

Now for you experienced developers out there, you're probably thinking about what an easy thing a for loop is. Let me reassure you, that for a newb- it most certainly is not.

In this blog post I will try to explain the for loop in simple words, that I had wished was out there when I was learning. This is my attempt to simplify, I hope I don't miss the mark!

To start, a for loop is a function that iterates through a data type. This means it goes through data piece by piece. This is very useful in Javascript.

lets start with a simple array and a simple function

let myArr = ['a0','b1','c2','d3','e4','f5']

loopy = (arr) => {
   console.log(arr) 
}
//this can also be written as 
// function(arr){
//    console.log(arr)
// } 
// but for the purposes of this blog we will use the arrow function 

loopy(myArr)
//output = ['a0','b1','c2','d3','e4','f5']

if we want to add 1 to each of these numbers in the array we could add them manually but there is a faster way using the for loop. The for loop takes three in statements and looks like this

for(statement one; statement two; statement three){
}
// always remember its a ";" and NOT a "," between the arguments. when //your starting out and running into problems check this first!

argument one will be the variable you declare and its starting point, this is what you will call on when you make changes and or loop through the data. very commonly you will see this declared as "i" but it could be anything

for(for let i = 0; argument two; argument3){
}
//this could easily be 
//for(let banana = 0; argument two; argument3){
//}
// you can name the variable anything you'd like

argument two will be the conditions that you set for the variable. You if statement if you will. Here you will say how far you want the loop to go. we have six pieces of data in out array so let's limit it to five so you can see how it works. Keep in mind arrays start at the index 0. So if you say i < 5 then continue as long as i is less than 5

for(let i = 0; i < 5; argument3){
}

//for(for let banana = 0; banana < 5; argument3){
//}
// you can name the variable anything you'd like

The third statement is what gets executed after the last code runs. SO if you put i++ its saying to continue on with the code

for(let i = 0; i < 5; i++){
}

//for(for let banana = 0; banana < 5; banana++){
//}
// you can name the variable anything you'd like

Now lets do something with the data we have. we can simply console log each index if we place the for loop inside of our function

let myArr = ['a0','b1','c2','d3','e4','f5']

loopy = (arr) => {
  for(let i = 0; i < 5; i++){
    console.log(i + " is the index of the array " + arr[i] + " the pieces of data at that index")

  }
}

loopy(myArr)
//output 
//0 is the index of the array a0 the pieces of data at that index
//1 is the index of the array b1 the pieces of data at that index
//2 is the index of the array c2 the pieces of data at that index
//3 is the index of the array d3 the pieces of data at that index
//4 is the index of the array e4 the pieces of data at that index

and now that you can access the data in the array you can do so much more!

Top comments (0)