Why am I getting an “undefined” line after what I actually want?

Question

Spoiler warning: I am posting a solution for the problem "Staircase" of HackerRank. So, I am trying to solve a beginner's challenge, with JS to print a ladder. I have to write a function that prints a ladder according to the number of steps entered as a parameter. For example:

stairs(4)

Should return

   #
  ##
 ###
####

I got this code, and while it is mostly OK, I get an "undefined" line in the end. So:

function staircase(n) {

    var stair=[]; /*array of strings */

    for (var i=1; i <=n; i++){
        var step= " ".repeat(n-i).concat("#".repeat(i));
        stair.push(step);

    }
    for (var i=0; i<=stair.length; i++){
        console.log(stair[i])
    }
}

When staircase(6) is run, it returns this:

     #
    ##
   ###
  ####
 #####
######
undefined

What bothers me is the "undefined" word, that prevents me from submitting the slution. I only guessed a possible solution was replacing the "<=" in the 2nd for loop declaration, for simply "<", and that did it:

function staircase(n) {

    var stair=[]; /*array of strings */

    for (var i=1; i <=n; i++){
        var step= " ".repeat(n-i).concat("#".repeat(i));
        stair.push(step);

    }
    for (var i=0; i<stair.length; i++){
        console.log(stair[i])
    }
}

When I run staircase(6), it returns what it should:

     #
    ##
   ###
  ####
 #####
######

Although the problem is solved, I do not understand precisely why. My question is: Why does the "undefined" word appears in the first case, and why does the replacement I did fixes it? Thx!

Answer 1

Given an array of [1, 2, 3] it will have a length of 3 .

• foo[0] is 1
• foo[1] is 2
• foo[2] is 3

Since 3 <= array.length you then log foo[3] which is… undefined .

Answer 2

You should run on stair array till i < stair.length like this:

 function staircase(n) { var stair=[]; /*array of strings */ for (var i=1; i <=n; i++){ var step= " ".repeat(ni).concat("#".repeat(i)); stair.push(step); } for (var i=0; i<stair.length; i++){ console.log(stair[i]) } } staircase(6)

According to MDN:

JavaScript arrays are zero-indexed: the first element of an array is at index 0, and the last element is at the index equal to the value of the array's length property minus 1.

Accessing array elements

Answer 3

Your first loop runs from 1 to n(n iterations)

for (var i=1; i <=n; i++){
        // statements
}

while your second loop runs from 0 to n(total n+1 iterations)

for (var i=0; i<=stair.length; i++){
        console.log(stair[i])
}

Since stairs only have n values in it, on n+1th iteration, undefined is returned.

Answer 4

When you run staircase(6) with i<=n in the for loop, in the last iteration you are accessing the element at the sixth index which does not exist, hence it is undefined. Array indices start from 0, so for staircase(6), the indices go only up to 5.