<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Andrea</title>
    <description>The latest articles on DEV Community by Andrea (@andreajasper).</description>
    <link>https://dev.to/andreajasper</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F615194%2F3711ed00-3b9d-4cac-9d46-2a90cca7ff16.jpeg</url>
      <title>DEV Community: Andrea</title>
      <link>https://dev.to/andreajasper</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/andreajasper"/>
    <language>en</language>
    <item>
      <title>The Staircase problem (a JavaScript solution)</title>
      <dc:creator>Andrea</dc:creator>
      <pubDate>Fri, 09 Sep 2022 18:29:33 +0000</pubDate>
      <link>https://dev.to/andreajasper/the-staircase-problem-a-javascript-solution-5955</link>
      <guid>https://dev.to/andreajasper/the-staircase-problem-a-javascript-solution-5955</guid>
      <description>&lt;h2&gt;
  
  
  What is the infamous staircase problem?
&lt;/h2&gt;

&lt;p&gt;Imagine a staircase. Each step takes you further from the first one. Simple enough, right?&lt;/p&gt;

&lt;p&gt;The base and height both equal &lt;code&gt;n&lt;/code&gt;; # symbols and spaces represent each level of stairs. Your code should return a staircase of &lt;code&gt;n&lt;/code&gt; size.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conditions&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;n is an integer that represents the &lt;code&gt;size&lt;/code&gt; of the staircase ie: &lt;code&gt;n = 3&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Print the staircase size with &lt;code&gt;spaces&lt;/code&gt; and &lt;code&gt;#.&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;sample:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;     #
    ##
   ###
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Start Simple
&lt;/h2&gt;

&lt;p&gt;We know that as we travel down the staircase, we need to reduce the number of spaces by 1. We also needed to keep track of each row to reduce the number of spaces.&lt;/p&gt;

&lt;p&gt;Let's start with something simple(and ugly)...&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function staircase(n) {
   let row = "";

   for (let j = n; j &amp;gt; 0; j--) {
      for (let i = 1; i &amp;lt;= n; i++) {
         if (i &amp;lt; j) {
            row += " ";
            continue;
         }
            row += "#";
         } if (j === 1) {
            continue;
         }
      row += "\n";
      }
   console.log(row);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The break down:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;I created a variable called &lt;code&gt;row&lt;/code&gt; that will return the final result&lt;/li&gt;
&lt;li&gt;The first(outer) loop tracks the number of rows &lt;code&gt;n&lt;/code&gt;, that we need.&lt;/li&gt;
&lt;li&gt;The second (inner) loop, tracks the number of spaces and # symbols needed for each row.&lt;/li&gt;
&lt;li&gt;Lastly, we output the result with a &lt;code&gt;console.log&lt;/code&gt;.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  The refactor
&lt;/h2&gt;

&lt;p&gt;While the above code meets all the problem requirements, it's messy. So I did some research and found a much cleaner solution by &lt;a href="https://medium.com/@alireubenstone/two-ways-to-solve-the-hackerrank-staircase-problem-in-javascript-8036d2254567"&gt;Ali Reubenstone&lt;/a&gt; that uses JavaScript's &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat"&gt;repeat method&lt;/a&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function staircase(n) {
    for (let i = 1; i &amp;lt;= n; i++) {  
        console.log(" ".repeat(n-i) + "#".repeat(i))
    }    
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let's break it down:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The for loop iterates over each row.&lt;/li&gt;
&lt;li&gt;During the interation process, we print the # symbols and spaces.&lt;/li&gt;
&lt;li&gt;Finally, we repeat the blank spaces by the &lt;code&gt;n-i&lt;/code&gt; number and # symbols by 'i' number of times so that each row (from top to bottom) reduces the number of spaces while increasing the number of # symbols, thus creating a &lt;code&gt;staircase&lt;/code&gt; shape.&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
