DEV Community

loading...
Cover image for Practice JavaScript by Breaking Things Down

Practice JavaScript by Breaking Things Down

canderson93 profile image Carl Anderson Originally published at carlanderson.xyz on ・3 min read

The most important skill you can have as a developer is knowing how to break tasks down - and it's a skill you can practice without a computer.

As a beginner developer, one of the most frustrating situations you'll encounter is attempting to complete a simple task, but you have no idea where to begin.

I've said it before, but learning JavaScript isn't enough. Hundreds of pieces of JavaScript can be rattling around in your head, but unless you can break down tasks into code, you'll struggle to get a single line out.

The thing is programmers are constantly breaking things down and exploring systems around them. A question that regularly floats in our mind is 'how does that work?', or 'how would that work?'.

This kind exploration is in this clip from the first season of Silicon Valley (warning: incoming dick references).

Yes, it's hyperbole, but I've had discussions with programmer friends where we break down ridiculous ideas like this. It's a lot of fun – and it's a valuable programming exercise.

Exercise: Breaking down Processes

When you're starting programming, the best thing for you to look for and break down are processes_._ A process is anything that boils down into a series of actions or decisions.

Our life is full of processes - how you drive, how the bartender serves you, how you tie your shoes. When you're exploring a process, the first step is to define the actions or decisions in the process.

Here's a high-level pass at a process that a bartender might follow.

1. Decision: Choose the hottest person at the bar
2. Action: Take their order
3. Action: Make their drink
4. Action: Take their money
Enter fullscreen mode Exit fullscreen mode

Although this explanation is enough for a human to follow, we want to explore this more thoroughly and add more detail by asking two more questions:

  1. What criteria impact the decisions?
  2. Are any of the steps also processes?

In this example, all the steps are processes. How do you tell who the hottest person at the bar is? If you add some more detail, it could turn out to be something like this:

1. Choose the hottest person at the bar
    1. Take a thermometer
    2. Go around every person at the bar, and take their temperature
    3. Choose the person with the highest thermometer reading
2. Take their order
    1. If you're not next to the person, walk over to them
    2. If it's loud, yell the next step
    3. Ask for their order
    4. Wait for response
3. Make their drink
    1. Get a glass
    2. Go over to the beer tap
    3. Pull the tap's handle
    4. Wait until the glass is full
    5. Stop pulling the tap's handle
    6. Place the full glass on the bar
4. Take their money
    1. Put hand out, expectantly
    2. If they didn't order beer, wait until yelling stops then apologise
    3. Else, when money has been placed in your hand, put it in the till
Enter fullscreen mode Exit fullscreen mode

Compared to our last attempt, this is a far more detailed (and revealing) version of a bartender's process. There are still details missing, but exploring this any further wouldn't be very fun.

When you're doing this in the world, you can be as detailed, or as thorough as you like. The point of the exercise is breaking down tasks into its component pieces, not creating something you can actually code. Have fun with it.

If you haven't seen it already, you can also check out my other article on breaking down programming problems via pseudo-code.


Are you stuck on JavaScript Tutorials? Sign up to my newsletter for more helpful articles to get you moving again

Discussion (5)

pic
Editor guide
Collapse
averyd profile image
Avery D

*practice

Collapse
canderson93 profile image
Carl Anderson Author

Practise is the verb form is British English, but I can appreciate this is mostly an American audience, so I'll change it :)

Collapse
averyd profile image
Avery D

My bad I didn't know, feel free to ignore me haha

Collapse
gr1d99 profile image