Photo by Lindsay Henwood on Unsplash

The Steps Test

This post is part of my Rise to the Equation series on data structures and algorithms.

The Problem

Write a function that accepts a positive number N. The function should console log a step shape with N levels using the # character. Make sure the step has spaces on the right hand side!

— Examples
steps(2)
‘# ‘
‘##’
steps(3)
‘# ‘
‘## ‘
‘###’

Source

When I took my first stab at pseudo-coding this problem, I knew that I wanted to stop the execution of the function once I reached the value of n. For that reason, I used a while loop that executed while an unnamed value was less than or equal to n. Inside that loop, I also wanted to use a for loop and inside that started guessing how I might add a # or a space to the string.

function steps(n) {
 while (when something === n) {
     let stepsString = ''

     for loop to iterate through each row
       check if the string length is === n
          
       // how to calculate spaces?
    
     console.log(stepsString)
  }
}

As you can see, I wasn’t quite sure how I was going to add the appropriate number of spaces.

Solution #1: Iterative

As I was researching the issue, I learned about the rows and columns iterative solution. For this solution, picture that each # or space (‘ ‘) character is in a row and a column. Each of those rows and columns are assigned numbers. Looking back at the examples provided with the problem, you can picture that row 0, column 0 has a #, and row 0, column 1 has a ‘ ‘. That knowledge is used in an if/else statement inside the iteration of columns

function steps(n) {
  // From 0 to n (iterate through rows)
  for (let row = 0; row < n; row++) {
    let stair = ''

    // From 0 to n (iterate through columns)
    for (let column = 0; column < n; column++) {
      // if row > column, add a # to stair (don't forget to use += in a traditional for loop)
        if (column <= row) {
          stair += '#'
        } else {
          stair += ' '
        }

    }
    // make sure to log inside the initial for loop
    console.log(stair);
  }
}

Solution #2: Recursion

My initial stab at this problem was inching toward this solution, but didn’t work out all of the kinks. To be clear, a recursive function is one that calls itself until it hits a break point. As a side note, don’t forget to add that point or else your browser will get stuck in an endless loop and crash!

function steps(n, row = 0, stair = '') {
  if (n === row) {  // this is the base case. If met, we are finished.
    return
  }

    if (n === stair.length) {  // this case advances us through rows
      console.log(stair);
      steps(n, row + 1)
      return
    }

    if (stair.length <= row) {  // add the proper character to stair
      stair += '#'

    } else {
      stair += ' '
    }
    steps(n, row, stair)  // don't forget to call the function again!
}

Once you look at this solution, it seems obvious. It takes practice to learn how to determine the edge cases and sub problems. If you are still fuzzy on this solution, that’s okay. I’ll cover recursion again in this series. I am learning more about it as you are!

That’s all there is to it! I hope you found this problem interesting. I definitely had fun working through it and learning more about how to write a recursive function.

Resources on Recursion