Practice JavaScript by Breaking Things Down
Tags: beginners, javascript, webdev
Published: 2019-11-01 12:15:45

---
title: Practice JavaScript by Breaking Things Down
published: true
date: 2019-10-31 16:58:22 UTC
tags: beginner,javascript,webdev
canonical_url: https://carlanderson.xyz/practise-javascript-by-breaking-things-down/
cover_image: https://images.unsplash.com/27/type-set.jpg?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ
---

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,](https://dev.to/canderson93/can-you-actually-learn-javascript-from-an-online-course-5eag) 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).

{% youtube P-hUV9yhqgY %}

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
```

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
```

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](https://dev.to/canderson93/how-to-write-javascript-when-you-don-t-know-where-to-begin-5f3f).

----
[Are you stuck on JavaScript Tutorials? Sign up to my newsletter for more helpful articles to get you moving again](https://pages.convertkit.com/9f030a68c9/cd303b3d7b)