How To Solve The Staircase Code Challenge

How To Solve HackerRank’s Staircase Code Challenge With JavaScript

How To Solve HackerRank’s Staircase Code Challenge With JavaScript

Problem

Let’s break down the challenge into requirements:

• n is an integer between 0 and 100
• n is the size of of staircase from 1 to n
• We need to console.log a staircase in “#” with it being right aligned

// Example
// n = 3
// Output
  #
 ##
###
// Example
// n = 6
     #
    ##
   ###
  ####
 #####
######

Covering Our Bases

Meeting the requirements above:

function staircase(n) {
    if (n > 0 && n <= 100 && typeof n === "number" && n === parseInt(n, 0)) {
         // continue 
    }
}

Understanding The Problem

For this we know that have to have a set of characters before with blanks and the remaining characters in hashes (#). To solve this, we’ll be using a method to create an array of blank spaces based on the value of n.

Getting Blank Spaces

In order for us to create the number of blank spaces we’ll need to declare an array of length n minus 1 for the first line. We will then iterate over it and replace all values with blank spaces;

function staircase(n) {
    if (n > 0 && n <= 100 && typeof n === "number" && n === parseInt(n, 0)) {
        
         let blanks = (new Array(n - 1)).map(i => ' ');
         // [ empty, empty, empty, ... ] 
    }
}

The issue is that when we do this, blanks is an array of n but still with empty values. The issue is that an array with n values can not be iterated over.

Solving Iteration

To solve this, we’ll need to use Array apply or the ES6 version with array spread operators, which will give us values of undefined in our array, which allows us to iterate over the array.

function staircase(n) {
    if (n > 0 && n <= 100 && typeof n === "number" && n === parseInt(n, 0)) {
        
         let blanks = [ ...[], ...Array(n - 1) ].map(i => ' ');
         // [ ' ', ' ', ' ', ... ]
    }
}

Adding Hashes

Next step is to perform the same action with hashes. We know that the first line only has one hash, so we need to solve for (n + x = 1):

n + x = 1
x = 1 - n
// let's say n = 7
7 + (1 - 7) = 1
7 + -6 = 1
// or
7 - (7 - 1) = 1
n - (n - 1) = 1

Adding it to the code would look like the following:

function staircase(n) {
    if (n > 0 && n <= 100 && typeof n === "number" && n === parseInt(n, 0)) {
        
         let blanks = [ ...[], ...Array(n - 1) ].map(i => ' ');
         // [ ' ', ' ', ' ', ... ]
         let hashes = [ ...[], ...Array(n - (n - 1))].map(i => '#');
         // [ '#' ] 
    }
}

Output

Now that we have the arrays, we just need to join them and output it as a string. Todo this we’re going to merge them with spread operators, and then join them to make a string.

function staircase(n) {
    if (n > 0 && n <= 100 && typeof n === "number" && n === parseInt(n, 0)) {
        
         let blanks = [ ...[], ...Array(n - 1) ].map(i => ' ');
         // [ ' ', ' ', ' ', ... ]
         let hashes = [ ...[], ...Array(n - (n - 1))].map(i => '#');
         // [ '#' ]
         console.log([
              ...blanks,
              ...hashes
         ].join(''));
         // _ _ _ _ _ #    
    }
}

Looping

Now that we have the format, we just need to do the other steps, by adding this to a for loop.

function staircase(n) {
    if (n > 0 && n <= 100 && typeof n === "number" && n === parseInt(n, 0)) {
 
         for (let r = 1; r <= n; r++) {
              let blanks = [ ...[], ...Array(n - r) ].map(i => ' ');
              let hashes = [ ...[], ...Array(n - (n - r))].map(i => '#');

              console.log([
                   ...blanks,
                   ...hashes
              ].join(''));
         } 
    }
}

Solution

The full solution without the comments:

function staircase(n) {
    if (n > 0 && n <= 100 && typeof n === "number" && n === parseInt(n, 0)) {
         for (let r = 1; r <= n; r++) {
              let blanks = [ ...[], ...Array(n - r) ].map(i => ' ');
              let hashes = [ ...[], ...Array(n - (n - r))].map(i => '#');
              console.log([
                   ...blanks,
                   ...hashes
              ].join(''));
         } 
    }
}

Test Cases

Validating the code with some tests:

// n = 3, Expected
// _ _ #
// _ # #
// # # #
// n = 6, Expected
// _ _ _ _ _ #
// _ _ _ _ # #
// _ _ _ # # #
// _ _ # # # #
// _ # # # # #
// # # # # # #
staircase(3);
// _ _ # ✅
// _ # # ✅
// # # # ✅
staircase(6);
// _ _ _ _ _ # ✅
// _ _ _ _ # # ✅
// _ _ _ # # # ✅
// _ _ # # # # ✅
// _ # # # # # ✅
// # # # # # # ✅

Feedback

If you have any tips on how this can be better optimized or talk about coding, I would love to talk.

If you got value from this, please share it on twitter 🐦 or other social media platforms. Thanks again for reading. 🙏

Please also follow me on twitter: @codingwithmanny and instagram at @codingwithmanny.