Many beginners believe they cannot understand JavaScript because JavaScript is abstract.

But JavaScript isn't abstract. Programming isn't abstract either.

People feel that programming is abstract because they don't have a proper hook to understand it yet. Programming can become real and relatable once a proper hook is installed.

This hook comes in the form of analogies.

There are three steps to writing good analogies:

1. Pick an understandable analogy
2. Expand on the analogy
3. Link the analogy back to the concept

Pick an understandable analogy

Your first step is to pick an analogy that your student will understand. This should be something they have experienced before.

Think about your student. What do they experience in their daily lives? Which experiences can you use as analogies for the concept you're trying to explain?

Open a document and write down every possible experience you can use for your analogy. Don't filter yourself. Write everything down.

Then, pick one analogy.

Just one.

And expand on the analogy.

Expand on the analogy

Some people will understand your analogy intuitively.

But not everyone will.

You need to explain your analogy so everyone gets it. This is especially important if you cannot get instant feedback from your student. And on the web, we can't get instant feedback.

This also means the analogy you pick needs to be simple to explain. Don't pick something that requires the student to understand of a lot of rules (like soccer).

Here are some analogies I used in the past:

1. When taught functions, I talked about drawing water from a well.
2. When I taught objects, I related objects to real-life objects like a computer.
3. When I taught scope, I shared about a one-way glass.
4. When I taught Git, I talked about save-points in a game.

When you expand on your analogy, try to make the student imagine the things you're talking about. Make it vivid. The more vivid you make your analogies, the longer it'll stick to in their head.

Here's an example on how I created the draw water analogy for functions. Notice how you can imagine yourself picking up a pail and walking to the middle of the village. You can also imagine the pain of explaining this process to someone.

Imagine you live in a village without tap water. To get water, you need to take an empty bucket, head to the well in the middle of the village, draw water from the well and head back home.

You need to draw water from this well multiple times a day. It’s a hassle to say “I’m going to take an empty bucket, go to the well, draw water and bring back home” every time you explain what you’re doing.

To shorten it, you can say you’re going to “draw water”.

And my friend, you’ve created a function.

Once you have explained your analogy, you need to link it back to the concept.

Link the analogy back to the concept

Linking the analogy back to the concept is critical. If you miss this step, your students will wonder why you brought out the analogy.

To link the analogy back to the concept, you talk about the similarities between the analogy and the concept.

Here's how I linked the draw water analogy back to functions.

A function is a block of code that executes tasks in a specific order, like take the empty bucket, go to well, draw water, head back home.

Once you link the analogy back to the concept, you make the concept concrete and real for your student. The analogy's job is done.

What's next is to explain the details they need to know about the concept.

Wrapping up

There are three steps to creating great analogies.

1. Pick an understandable analogy
2. Expand on the analogy
3. Link the analogy back to the concept

Analogies can be hard to create at the start. You may feel that your analogy is not good enough.

And that's okay. You can always improve your analogy game over time.

Thanks for reading. This article was originally posted on my blog. Sign up for my newsletter if you want more articles to help you become a better frontend developer.