Recursion: Two ways to convert from a JavaScript for-loop

One of the cases you can use for a JavaScript example of a for-loop is an iteration through an array. For example, we will use an array of strings:

let arr = ['how','to','iterate','an','array']

To iterate through the array, we can use a for-loop:

const arrayLoop = arr => {
  for (let i=0; i<arr.length; i++){
      console.log(arr[i])
  }
}

This will loop through the array and perform whatever operation is in the block, in this case send the array element at the index of i to the console. The "i" index is what is actually controlling the loop. The loop is incrementing i, starting at 0 and adding 1 each cycle until i reaches the length of the array. Since the index is 0 based, the index of the first element of the array is 0 and the index of the last element is a number that is one less than the total number of elements (length) in the array. For example, if there are 4 elements in the array, the last element would have an index of 3 (one less than 4). The loop continues as long as the increment (index) is less than the length of the array (4).

One way to convert that for-loop to a recursion is to move the index into the argument for the function and then recursively call the function incrementing "i" in the call:

const arrayLoop = (arr, i=0) => {
  if (i>arr.length-1){return}
  console.log(arr[i])
  return (arrayLoop(arr, i+1))
}

Setting "i" to 0 as a default value allows you to call the function with just the "arr" argument. Just like in the for-loop, the index starts at 0 and increments in each recursive call until the loop breaks when "i" is greater than the length of the array.

Another option would be to have actually change or "mutate" the array passed into the argument. It the following example, we'll change each element to an upper case replacement of the element contents and create a new array while we change the contents of the source array. The source array passed in as an argument will no longer exist once the loop is completed.

let result=[]
const capitalizeWords = arr => {
  if (arr.length<1){return result}
  result.push(arr[0].toUpperCase())
  arr.shift()
  return (capitalizeWords(arr))
}

Each cycle through the loop takes the first element of the array, changes the element contents to upper case letters, adds it to the "result" array and then removes it from the source array (shift). This moves the next element into the "0" index position and shortens the array by element that was just removed. Then the function is recursively called until the length of the array is 0 - when all of the array elements have been "shifted" out of the array.

Recursion can be a little overwhelming. Little exercises like this help you learn a little better understanding of recursion and different ways to achieve it. If you need to find a recursive solution to a problem, you might be able to start from a for-loop and then convert it from there. Hope this was helpful.