feat: break down how I turn each step into code

2025-12-10 12:11:05 -08:00
parent bbac528845
commit 85f80fb159
1 changed files with 141 additions and 4 deletions
--- a/posts/how-to-think-algorithmically.md
+++ b/posts/how-to-think-algorithmically.md
@@ -162,26 +162,136 @@ Let us go back to the pyramid example. We have our logic:
 3. Print the spaces, then the characters.
 4. Move to the next row.

-Now we can think about the code structure:
+Now we can think about the code structure.
+
+First, let's define our function:
+
+```javascript
+function pyramid(characterToBuildPyramidWith, numOfRows) {
+
+}
+```
+
+What are our steps?

 - We need a loop to iterate through rows.
 - For each row, we gotta know how many spaces to use. We use less spaces in each row.
 - For each row, we gotta know how many characters to use. We use more characters in each row.
 - Finally, print our result.

-The code almost writes itself once the logic is clear:
+Okay, let's cretae a loop to iterate through the number of rows. Sounds like a great usecase for a standard `for` loop.

 ```javascript
 function pyramid(characterToBuildPyramidWith, numOfRows) {
  for (let row = 0; row < numOfRows; row++) {
-    const spaces = " ".repeat(numOfRows - row - 1);
+
+  }
+}
+```
+
+We're using `row` instead of `i`, so it's less confusing.
+
+Now for each row (so each iteration), we gotta know how many spaces to use. Thankfully, we've already sorted that out in our logic:
+
+> Add a number of spaces equal to the integer
+> Write the whole space and string again from the last row, get rid of one space again
+
+So we start with `numOfRows` spaces, and for each iteration we can decrement the number of spaces by one. I think, then, that we could do `numOfRows - row`. Let's put that in a variable so we don't lose track.
+
+```javascript
+function pyramid(characterToBuildPyramidWith, numOfRows) {
+  for (let row = 0; row < numOfRows; row++) {
+    const spaces =  " ".repeat(numOfRows - row);
+  }
+}
+```
+
+Alright, now the number of characters. Again, we can refer back to our paper logic:
+
+> Write the same spaces string from before again, but get rid of one space, and write the string.
+> Write the whole space and string again from the last row, get rid of one space again, and add two more of the same string.
+
+Okay, so we start with one character, and add two more for every iteration. That would be... `row` times two, but add one to account for the initial character.
+
+
+```javascript
+function pyramid(characterToBuildPyramidWith, numOfRows) {
+  for (let row = 0; row < numOfRows; row++) {
+    const spaces = " ".repeat(numOfRows - row);
+    const characters = characterToBuildPyramidWith.repeat(row * 2 + 1);
+  }
+}
+```
+
+Finally, our last step:
+
+> Finally, print our result.
+
+We can print things with a `console.log` statement. Let's print our spaces followed by our characters.
+
+```javascript
+function pyramid(characterToBuildPyramidWith, numOfRows) {
+  for (let row = 0; row < numOfRows; row++) {
+    const spaces = " ".repeat(numOfRows - row);
    const characters = characterToBuildPyramidWith.repeat(row * 2 + 1);
    console.log(spaces + characters);
  }
 }
 ```

-But wait! Did you see? I did not write this code until I had worked through the logic entirely by hand. I knew exactly what I wanted my program to do! All I had to worry about when I hit the keyboard was the syntax to make it do the thing.
+Time to double check our work! Let's call our function:
+
+```javascript
+function pyramid(characterToBuildPyramidWith, numOfRows) {
+  for (let row = 0; row < numOfRows; row++) {
+    const spaces = " ".repeat(numOfRows - row);
+    const characters = characterToBuildPyramidWith.repeat(row * 2 + 1);
+    console.log(spaces + characters);
+  }
+}
+
+pyramid("x", 5);
+```
+
+Checking the console, I see:
+
+```txt
+     x
+    xxx
+   xxxxx
+  xxxxxxx
+ xxxxxxxxx
+```
+
+That looks like a pyramid! But hang on... It looks like we've shifted it one space too far. Let's go back to our logic on paper, because our logic is off (so we don't want to touch the code yet).
+
+1. Look at the string. It is what we want the pyramid to be built by.
+2. Look at the integer. It is the amount of rows we want.
+3. Add a number of spaces equal to the integer, and then write the string.
+4. Go to the next line.
+5. Write the same spaces string from before again, but get rid of one space, and write the string.
+6. Add two more of the same single string beside it.
+7. Write the whole space and string again from the last row, get rid of one space again, and add two more of the same string.
+8. Repeat step 7 until you have the same number of rows as the integer.
+
+AHA! Our issue is in step 3.
+
+> 3. Add a number of spaces equal to the integer, and then write the string.
+
+By adding the number of spaces equal to the integer, we've failed to account for the initial pyramid character. Essentially, we need to add one less space.
+
+So we update our logic **first**:
+
+1. Look at the string. It is what we want the pyramid to be built by.
+2. Look at the integer. It is the amount of rows we want.
+3. Add a number of spaces equal to the integer **less one**, and then write the string.
+4. Go to the next line.
+5. Write the same spaces string from before again, but get rid of one space, and write the string.
+6. Add two more of the same single string beside it.
+7. Write the whole space and string again from the last row, get rid of one space again, and add two more of the same string.
+8. Repeat step 7 until you have the same number of rows as the integer.
+
+

 ## When Logic Breaks During Coding

@@ -207,6 +317,33 @@ Test it manually: if the integer is 5, I start with 5 spaces. Then I go to the n

 Now you can go back to your code with clarity. You know that for row 0, you need `numOfRows - 0 - 1` spaces (which is 4 for 5 rows). For row 1, you need `numOfRows - 1 - 1` spaces (which is 3). The pattern is clear because you worked it out in logic first.

+Okay, pretend we've tested our change manually (I am sparing you from reading through that process again), and it works. Now we can update our code to reflect our logic change:
+
+```javascript
+function pyramid(characterToBuildPyramidWith, numOfRows) {
+  for (let row = 0; row < numOfRows; row++) {
+    // Notice how this is the ONLY change I made. We aren't changing anything that isn't updated in the logic on paper.
+    const spaces = " ".repeat(numOfRows - row - 1);
+    const characters = characterToBuildPyramidWith.repeat(row * 2 + 1);
+    console.log(spaces + characters);
+  }
+}
+
+pyramid("x", 5);
+```
+
+And we get:
+
+```txt
+    x
+   xxx
+  xxxxx
+ xxxxxxx
+xxxxxxxxx
+```
+
+**WE'VE DONE IT!!!!!** 
+
 The key principle here is: **if you discover a logic problem while coding, you have not discovered a coding problem. You have discovered that your logic was incomplete.** Fix the logic first, test it manually, and then return to the code.

 This might feel inefficient. You might think "I am so close, let me just fix this one thing in code." But I promise you: fixing logic in code is like trying to repair the foundation of a house while you are painting the walls. It will not work, and you will make a bigger mess.