Understand JavaScript, But Can’t Write Code? These 7 Steps Will Help You Write Confidently

You've been learning JavaScript for a while, and you have a decent grasp of its concepts.

You can read the code, but when it comes to writing it, you're not entirely sure what to type. This is common for those who have recently started learning JavaScript.

In this article, I'll introduce a 7-step framework and apply it to a problem to demonstrate how it works. By using this framework and practicing it on a few more problems, you'll gain confidence in writing code.

Let's get started!

Step 1: Work an example yourself

The first step is to work an example yourself by hand. If you cannot yet do that, it means either that you need to further specify the problem or that you need domain knowledge.

Step 2: Write down exactly what you just did

The next step is to write down the details of how you worked the problem by hand in Step 1.

If you get stuck on this step because you “just knew it," you should try a more complex example that you cannot just solve by inspection.

Step 3: Generalize

Once you have worked at least one example by hand and written down the process, you can begin to generalize.

Why did you do something a certain number of times? Where did you start? When did you stop? It is often necessary to have worked several examples by hand to generalize well.

In fact, if you have trouble with this step, you should repeat Steps 1 and 2 on different instances of the problem.

Step 4: Test your algorithm

Now that you have a draft of a generalized algorithm, apply it to a new instance of the problem, and see if you get the correct answer.

This is essential for catching generalization mistakes. Finding mistakes before translating to code avoids wasting time. You can go back to Step 3 if you identify a generalization mistake.

Step 5: Translate to code

Steps 1–4 can be done with pencil and paper and are independent of language.

For Step 5, you need to know the syntax of a language and how to translate parts of the algorithm, such as counting or decision-making constructs.

It is often helpful to start with your algorithm steps as comments before you write any code.

If any of the lines in your algorithm do not immediately translate into one or two lines of code, they should be abstracted out into their own function: make a good name for the function, call it here, and make yourself a note about what it does.

After you finish translating this algorithm, go implement that function. That function is itself a programming problem (for which you wrote the problem statement), so use “this framework”.

Step 6: Test

Another round of testing is important because you could have a correct algorithm and still have made mistakes in the implementation in code. You also can have the computer run many more test cases more quickly than you can do them by hand.

Testing is the act of finding bugs, and you want to find as many as you can by writing a robust set of test cases. While it is not possible to know for certain that your program is correct, you can become more and more certain with good testing.

Step 7: Debug

Debugging is the act of fixing bugs you identified in the testing stage.

Once you’ve identified a problem, you need to figure out if the issue is with the algorithm or code implementation and go back to Step 3 or Step 5, respectively.

To demonstrate this workflow in action, let’s solve a common programming exercise: Fizz Buzz

Write a program that takes a user’s input and prints the numbers from one to the number the user entered. However, for multiples of three print Fizz instead of the number and for the multiples of five print Buzz. For numbers which are multiples of both three and five print FizzBuzz.

Step 1: Work an example.

Let's consider the number 15 for the FizzBuzz problem. We manually go through the numbers from 1 to 15, applying the rules: print "Fizz" for multiples of 3, "Buzz" for multiples of 5, and "FizzBuzz" for multiples of both 3 and 5.

1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz

Step 2: Write down exactly what you did.

• For each number from 1 to 15, check if it's a multiple of 3, 5, or both.
• If it's a multiple of both 3 and 5, print "FizzBuzz."
• If it's a multiple of only 3, print "Fizz."
• If it's a multiple of only 5, print "Buzz."
• If it's not a multiple of either, print the number itself.

Step 3: Generalize.

In generalizing, we observe repetitive behavior in checking for multiples of 3 and 5. We can make the algorithm more uniform by considering multiples of both 3 and 5 first. The generalized algorithm looks like this:

for each number from 1 to n
    if number is a multiple of 3 and 5, print "FizzBuzz"
    else if number is a multiple of 3, print "Fizz"
    else if number is a multiple of 5, print "Buzz"
    else print the number

Step 4: Test your algorithm.

Apply the generalized algorithm to another number, say 20, and check if the output matches expectations:

1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz, 16, 17, Fizz, 19, Buzz

If the output aligns with the rules, the algorithm is likely correct.

Step 5: Translate to JavaScript code.

Translate the generalized algorithm into JavaScript code:

for number in range(1, n + 1):
    if number % 3 === 0 and number % 5 === 0:
        console.log("FizzBuzz")
    elif number % 3 === 0:
        console.log("Fizz")
    elif number % 5 === 0:
        console.log("Buzz")
    else:
        console.log(number)

Step 6: Test.

Run the program with various inputs, including edge cases, to ensure it produces the correct output.

Step 7: Debug.

If any issues or unexpected outputs are identified during testing, go back to Step 3 or Step 5 to refine the algorithm or correct the code implementation accordingly.