Moving Past Tutorials: Pseudocode

Ali Spittel - May 7 '19 - - Dev Community

An often overlooked part of coding is pseudocode. Pseudocoding involves thinking about the steps to solving a problem and writing them in plain words instead of any running programming language.

You may have run into the "staring at a blank text editor file with no idea where to start" problem, which can often be solved by writing pseudocode and really thinking through the problem at hand. If at any time you feel stuck when writing code, you will probably want to start writing some pseudocode.

First, in order to write pseudocode, we need to start thinking about the parts of the problem. Since computers are so literal, we need to think of every tiny detail and include it -- if we're skipping things then we'll probably have issues down the road.

First, let's think of the steps for taking out my dog.

- I have to find my shoes.
    - If my dog steals said shoes, I have to retrieve them
    - If it's cold or I'm going on a long walk and I'm wearing sneakers or boots, I need to find socks.

- If I need socks, I put one sock on my foot and then the other on my other foot.
- Then, I put the left shoe on my left foot and then the right shoe on the right foot.
    - If they have laces, I tie each shoelace.

- I find Blair's leash, poop bags, and my keys 
    - they're usually on the counter, but sometimes she will move her leash to somewhere else and I'll have to go looking

- I clip on her leash. I then keep holding onto her leash

- I open the door to my apartment, then close it, then lock it.

- We walk to the elevator, press the down button and then wait.

- When the elevator door opens, I walk in and also make sure Blair follows me in. If she doesn't I need to pull her in or pick her up and carry her

- We hit the button to go down to the lobby of our building, wait for the elevator to get to the lobby, and then exit the elevator and the building

Etc.
Enter fullscreen mode Exit fullscreen mode

I could keep going, but I think you get it at this point -- there are a couple things to note here: I'm super specific. I am writing down every possible step. I also write about the things that could go wrong -- what are the edge cases that may happen? And how do I solve those?

But, I can refactor this to look even more like real code as a second step!

If it's cold:
    wear boots
If I'm going for a long walk:
    wear sneakers
If my shoes are not at the door:
    find them
else if my dog steals my shoes:
    chase her down and take them back
If I'm wearing sneakers or boots:
    get socks out of the drawer
    put one sock on my foot and then the other on my other foot
put on left shoe
put on right shoe
if the shoes have laces:
    tie the left shoe
    tie the right shoe

If Blair's leash, poop bags, and my keys are on the counter:
    grab them
else:
    find them in my apartment

Clip on Blair's leash
Hold on to her leash

Open the door to my apartment
Walk through it with Blair
Lock the door

Walk to the elevator
Press the down button
Wait for the elevator until it arrives

When the elevator arrives, get into it
Make sure Blair gets on too.

Press the button for the lobby
Wait for the elevator to get to the lobby
Exit the elevator
Exit the building
Enter fullscreen mode Exit fullscreen mode

This still isn't code, and we'll need to figure out functions and organization in the future, but we have a starting point. We aren't looking at a blank text editor anymore, and a lot of this can be pretty easily translated over to actual code -- like the conditionals.

For Code Challenges

Of course, walking my dog isn't a very common program. Let's talk about what this may look like for a real code challenge -- say reversing a string.

The first thing I might do is try to solve the problem on paper a few times to see how I would do it on paper -- I even have a whiteboard by my desk for this exact reason!

So, in this case, I'd notice that I take the last letter of my word, and add it to my reversed string. Then my second to last one, and so forth until there aren't any other letters left to add to the reversed string. But, there's also another way: I can instead take the first letter from the string and add it to the end of my new new string, effectively doing the same thing. So, for "hello, world" the progression would look like this:

h
eh
leh
lleh
olleh
 olleh
w olleh
ow olleh
row olleh
lrow olleh
dlrow olleh 
Enter fullscreen mode Exit fullscreen mode

Now that I've solved the problem on paper, I need to write the pseudocode for it. If I'm doing the same thing repeatedly in my code, I know that I need to use a loop -- and I'm definitely doing the same thing to multiple letters in this scenario.

So, the pseudocode may look something like this

reversed_string = ''
for letter in my_string
    reversed_string = letter + reversed_string
Enter fullscreen mode Exit fullscreen mode

If you need more intermediary steps, we could write something out like this:

reversed_string = my_string[0] + reversed_string
reversed_string = my_string[1] + reversed_string
reversed_string = my_string[2] + reversed_string
reversed_string = my_string[3] + reversed_string
Enter fullscreen mode Exit fullscreen mode

At which point, you might notice the pattern and be able to see the loop from there! You can always start out with more procedural code and add in abstractions and logic from there to DRY up the code and make it closer and closer to its final form.

Pseudocode for Applications

So, in the real world, you're probably going to be creating full applications or adding features to applications, not solving code challenges all day. In that case, after outlining your prospective features, like we talked about in the last post, you may take one feature at a time and write pseudocode for it.

For example:

User clicks on a button:
    A modal pops up with a form that has the fields name, address, and phone number

When the user submits the form:
    an AJAX request is sent to the server with the values from the form
    the modal closes
    if the form submission was successful:
        show an alert at the top of the page that says a new value was added
    else:
        show an alert with the errors
Enter fullscreen mode Exit fullscreen mode

Do one feature at a time, not the whole application so that if one specification changes, your work wasn't in vain!

My Challenge to You

Pick a code challenge and write pseudocode for it. Once you're done, take the project from last time and write pseudocode for one of its features.

Conclusion

Pseudocode is a very helpful tool for starting to think through problems. It looks different for everyone, for some people, it looks like a programming language, for others it looks more like non-programming language. It can even look different from that! I'll sometimes just write my function names before starting to dive into code in order to write an outline for myself! Find what works for you.

If you're looking at a blank text editor screen with no idea where to start, pseudocode is a great place to start, or even a step back from that may be to draw out the process on paper, observing your steps in detail.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .