Iteration is a process wherein a set of instructions or structures are repeated in a sequence a specified number of times or until a condition is met. When the first set of instructions is executed again, it is called an iteration.

Iteration is the repetition of a process in a computer program, usually done with the help of loops.

Iteration isn't a process that is executed only on arrays, objects, and sets.

Iteration can be a sequence of events that can / not have a breaking condition. when doing so the execution of those sequences of events will stop, when there is no breaking condition those sequences of events will rerun infinitely.

so today we are going to talk about iteration through arrays and how many possible ways to do so.

loops

As mentioned early, loops are the most known way to apply iteration in programming.

and loops also had built-in statements like the Break statement to break the iteration, and the continue statement to forward to the next step and break out of the current step but the iteration itself will continue.

for loops:

A for loop repeats until a specified condition evaluates to false (the breaking condition).

let iteratedArray = [....]
for ( let x = 0 ; x < iteratedArray.length (breaking condition1) ; x++(sequence of events) ){
// sequence of events 
if (breakingCondition2) break
if (skippingCondition) continue
}

while, do...while loops:

those types of loops are similar to for loops but with some small differences, so Let's see.

while loop :

in the while loop, you declare the condition if true the loop will run and repeats itself until the condition evaluates to false.

let iteratedArray = [....]
let x = 0 ;
while(  x < iteratedArray.length (breaking condition1) ){
// sequence of events 
if (breakingCondition2) break
if (skippingCondition) continue
x++(sequence of events)
}

do...while loop :

in the do...while loop, you declare the sequence of events and the breaking condition, And the loop will run at first without checking the breaking condition and after every execution, the loop will check the breaking condition if true will keep repeating the sequence of events until the breaking condition evaluates to false. so the big difference on do...while a loop is the execution of a sequence of events that happens first and then checks the breaking condition.

let iteratedArray = [....]
let x = 0 ;
do{
// sequence of events 
if (breakingCondition2) break
if (skippingCondition) continue
x++(sequence of events)
}while(  x < iteratedArray.length (breaking condition1) )

Array methods:

Array methods are methods ( built-in functions ) for the Array prototype and they were introduced to javascript in ES5 and ES6+, Like forEach, map, filter, .... reduce.

just to make this article scoped on one subject I won't go through every single one, I will only talk about the map method.

Map

map method allows you to access the Array elements and do some process on it or whatever you want to do and return new Element in A new Array so what does that mean let's see on code example :

let array = [...];

array.map((currentArrayElement , currentIndexOfTheElement , currentArray)=>{
//Do whatever you want to do 
// and also return what ever you want to return if you do not return any value it will 
// return undefined
return Some value
})
// if you assign the array.map to a value
// like this
let proceedArray = array.map((currentArrayElement , currentIndexOfTheElement , currentArray)=>{
//Do whatever you want to do 
// and also return what ever you want to return if you do not return any value it will 
// return undefined
return Some value
})
console.log(proceedArray)
//[Some value , Some value ,.....,Some value]

but there is a difference between array methods and loops that you can't break or continue.

but there are some ways you can do so, but let's see them on the next way to iterate through arrays.

recursion:

recursion is a concept used in programming to describe a process where a function calls itself.

and it's used a lot in JavaScript internally.

I think everyone would be familiar with this image, either by OBS screen recorder recording the output of the OBS, or by standing in front of a mirror and behind another one and they will reflect each other's reflecting light Infinitely.

for me to understand recursion you need to look to it as a normal function that instead of returning normal value, It returns a function call to itself.

In the future, we will go deep on recursion, but if you want to understand it now please check this video from FFF.

so now you at least know the concept of recursion let's see some code !.

let array = [...];

const logArray = (processedArray)=>{
  // this condition is for preventing the function to call itself after the array has been empty.
  // the maximum call stack issue  
  if(!array.length) return;

  let target = processedArray.shift();
  // sequens of Events 

  return logArray(processedArray)
}

logArray([...array]);

and to implement the break or the continue methods we can simply do it in the recursion with If conditions.

let array = [...];

const logArray = (processedArray)=>{
  // this condition is for preventing the function to call itself after the array has been empty.
  // the maximum call stack issue  
  if(!array.length) return;
  let target = processedArray.shift();

  //breaking Condition
  if(breakingCondition) return

  //continue Condition
  if(continueCondition) return logArray(processedArray)

  // sequens of Events 

   return logArray(processedArray)
}

logArray([...array]);

Conclusion :

In this article, we exploited 3 ways to iterate throw Arrays in javascript Loops, Array Method, And recursion.

next time we will build a Better Map Methods for array, we will apply recursion and loops like what I mentioned in this article.