Javascript Interview Question: Pyramid

es6-pyramid.js

/*
This function builds a pyramid using ES6 repeat function available on the String prototype.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat

colSize: is the width of the grid in columns. Also think of it as the width of the last row in the pyramid.
level: This represents the width of the pyramid level at each iteration.
numSpaces: This represents the number of spaces to use on both sides of the pyramid.
spaces: This variable is used to cache the result of String#repeat(), no need to do the same work twice.
*/

function pyramid(n) {
  const colSize = 2 * n - 1;
  
  for (let i = 1; i <= n; i++) {
    const level = 2 * i - 1;
    const numSpaces = (colSize - level) / 2;
    const spaces = ' '.repeat(numSpaces);
    console.log(`'${spaces + '#'.repeat(level) + spaces}'`);
  }
}

//Yet another possible solution. This approach seems strange to me, requiring the console.log to print 
//the output, and only afterwards, would we update the numSteps counter. It seems more natural for me to
//to see the console.log as the last step in the for loop.

function pyramid(n) {
   let numSpaces = n - 1;
   let numSteps = 1;
   for (let i = 0; i < n; i++) {
       const spaces = ' '.repeat(numSpaces);
       const steps = '#'.repeat(numSteps)
       numSpaces -= 1;
       console.log(`'${spaces + "#".repeat(numSteps) + spaces}'`);
       numSteps += 2;
   }
}

pyramid(5);

pyramid.js

/*
Draw this pyramid.

'    #    '
'   ###   '
'  #####  '
' ####### '
'#########'

Notes:
Step 1: Calculate the number of characters to print
for each row in the pyramid. Use the formula 2n - 1
to caculate this value. The examples below show the 
pattern.

const colSize = (2 * n) - 1; //where n is provided as an arg.

Formula: 2n - 1

(2 * 1) - 1 = 1
'#'

 (2 * 2) - 1 = 3
' # '
'###'

(2 * 3) - 1 = 5
'  #  '
' ### '
'#####'

(2 * 4) - 1 = 7
'   #   '
'  ###  '
' ##### '
'#######'

(2 * 5) - 1 = 9
'    #    '
'   ###   '
'  #####  '
' ####### '
'#########' 


Step 2: Calculate the mid point, or the center of
the pyramid. Use the formula, (2n - 1) / 2 to 
find the mid point. We use Math.floor() to round 
down to whole integer for results that contain a
fraction.

const colSize = (2 * n) - 1;
const midPoint = Math.floor(colSize / 2);

Step 3: Iterate both rows and cols, check if we are
within the bounds of the colSize +/- the offset. 
If so, print a '#' character. Otherwise, print a 
space character.
*/


function pyramid(n) {
  const colSize = 2 * n - 1;
  const midPoint = Math.floor(colSize / 2);

  for (let row = 0; row < n; row++) {
    let step = '';
    const leftSide = midPoint - row;
    const rightSide = midPoint + row;
   
    for (let col = 0; col < colSize; col++) {    
      step += (col >= leftSide && col <= rightSide) ? '#' : ' ';
    }
    console.log(step);
  }
}

//Try it
pyramid(5);


//Example 2: Create a pyramid using recursion.
function pyramid(n, row = 0, step = '') {  
  
  //Base case
  if (n === row) {
    return;
  }

  //Calculate the column size and mid point.
  const colSize = 2 * n - 1;
  const midPoint = Math.floor(colSize / 2);
  
  //Are we at the end of the row?
  if (step.length === colSize) {
    console.log(step);
    return pyramid(n, row + 1);
  }
    
  //Calculate left and right boundaries.
  const leftSide = midPoint - row;
  const rightSide = midPoint + row;
 
  //Append character. 
  step += (step.length >= leftSide && step.length <= rightSide) ? '#' : ' ';
  pyramid(n, row, step);
}

pyramid(5);