DEV Community

Cover image for My Journey through JavaScript: Flowcharting Pt. 1

Posted on • Updated on

My Journey through JavaScript: Flowcharting Pt. 1

My first blog post :)

I have found through leading some study groups in my bootcamp that I reinforce what I have learned by explaining it to others. So I have decided to start writing blog post as well to further build on my understanding.

So here we go...


When I first started flowcharting I HATED it! But it was a necessary evil at first and now it is something I do every time I start working through a problem. While there isn't necessarily a standard for flowcharting, what I understand is that the only standard is that loops/conditionals are labeled the same way across all flowcharts. Loops/conditionals are denoted by a diamond. Now that we have the boring stuff out of the way let's get to flowcharting!

Here is a very simple flow chart example (we will get into more difficult ones as we move further into this series). We want to take in 2 numbers from the user, add the numbers together and then render the result.

Step 1: Start (start with start like we always start)
Step 2: We will need two listeners
Step 3: These two listeners will take in two numbers one will be stored as input1 and the second will be stored as input2.
Step 4: We need an operator to handle the adding
Step 5: We need to render the result.

Now lets look at this in an actual flowchart...

In step 1 we added our start bubble so we know where our program starts. (In between step 1 and step 2 I went ahead and added an empty variable for my result so I can keep track of variables that I will need later on in the flowchart. You can also define this variable in step 4). In step 2 we added two listeners which indicate we need our program to ask the user for information. In step 3 we take the user information and store it in variables called input1 and input 2. Now that we have our user information we can move to step 4. In step 4 we use the variable result that was previously created (if you wanted to create your result variable in this step, the inside would be number: result = input1 + input2) and add an arithmatic operator to add the two user input variables together. In step five we render the result variable.

There you have your, albeit simple, flowchart. They get much more difficult as the task you need to achieve becomes more involved. In our next post we will dig deeper into flowcharting and look at loops and conditionals.

Until next time :)

Top comments (0)