nuzairb@gmail.com— press E to copy
FRONTEND ENGINEERING

The Gap Between Knowing JavaScript and Thinking in It

PUBLISHED ON:April 3, 2019

There is a version of knowing a language and a version of thinking in it. They feel similar from the outside — you can write code, you can read code, things run — but they are completely different states.

I spent about two years knowing JavaScript before I started thinking in it. This post is about what changed.

What knowing looks like

When I was in the "knowing" phase, I could follow tutorials. I could reproduce examples. When I hit a bug, I could google the exact error message and find a Stack Overflow thread that had the fix. I wrote working code.

But I was essentially translating. I had a mental picture of what I wanted — a dropdown that closes on outside click, a form that validates on submit — and I was translating that picture into JavaScript syntax I'd accumulated. When the translation didn't work, I didn't really know why. I'd try variations until something stuck.

The tells: I couldn't estimate how hard something was before doing it. I couldn't read code and hear it — understand what it was actually doing, feel its shape. I couldn't debug without console.logging every single variable.

What changed

I was building a task manager. Nothing original — but completely mine, no tutorial, no starter repo. I needed a drag-and-drop feature: tasks should reorder when dragged.

I spent four days on it. Not four productive days — four days of banging against the problem, breaking the code, fixing part of it, breaking it again differently. The longest four days I'd spent on a feature to that point.

On day four, something happened. I stopped thinking about the feature and started thinking about the problem underneath the feature. Drag-and-drop is a state management problem. The visual drag is just feedback for a mutation of array order. The drop is just a re-render after a splice.

Once I saw it that way, the implementation was obvious. I wrote it in an hour.

That reframe — from "how do I make drag-and-drop work" to "what is actually happening in the data" — was the shift. I'd crossed from knowing into thinking.

Why tutorials can't get you there

Tutorials are optimized to produce working output. That is their job and they do it well. But working output is not the same as understanding, and the gap between them is specifically the gap between knowing and thinking.

When a tutorial works, you feel productive. You've built something. The code runs. But you haven't built a mental model — you've borrowed one from the tutorial author. And borrowed mental models break the moment you need something the tutorial didn't cover.

The only way to build your own model is to be forced to use it. To be in a situation where you can't borrow someone else's because the exact thing you need doesn't exist. That's what building original projects does that tutorials cannot.

The thing about debugging

The clearest sign of the shift was how debugging changed.

Before: console.log everything, read the values, guess what's wrong, try a fix, repeat.

After: read the code, ask what each function believes about the world, find where a belief is wrong.

Debugging became a reasoning problem instead of a search problem. That doesn't mean it got easier — harder bugs are still hard. But the process became coherent. I had a method.

What I'd tell someone starting

Build original things earlier than feels comfortable. Not projects without guidance — reading, tutorials, fundamentals all matter. But ship something you designed, something where no one else decided what it should do.

It will be slower. It will be worse than the tutorial version. You will feel like you're doing it wrong.

That feeling is the gap closing.

Articles in the Same Series

FRONTEND ENGINEERING

The Case for Boring Tech in Client Projects

Feb 14, 2023
FRONTEND ENGINEERING

What Trading UIs Actually Need

Nov 22, 2022
FRONTEND ENGINEERING

React Hooks Changed How I Think About State

Mar 8, 2021
FRONTEND ENGINEERING

What My First Real Client Taught Me About Frontend

Aug 14, 2020
FRONTEND ENGINEERING

Why I Stopped Reaching for Component Libraries First

Nov 13, 2019
FRONTEND ENGINEERING

CSS Grid Finally Clicked — Here Is What Made It Make Sense

Jul 4, 2018
FRONTEND ENGINEERING

The Case for Boring Tech in Client Projects

Feb 14, 2023
FRONTEND ENGINEERING

What Trading UIs Actually Need

Nov 22, 2022
FRONTEND ENGINEERING

React Hooks Changed How I Think About State

Mar 8, 2021
FRONTEND ENGINEERING

What My First Real Client Taught Me About Frontend

Aug 14, 2020
FRONTEND ENGINEERING

Why I Stopped Reaching for Component Libraries First

Nov 13, 2019
FRONTEND ENGINEERING

CSS Grid Finally Clicked — Here Is What Made It Make Sense

Jul 4, 2018
FRONTEND ENGINEERING

The Case for Boring Tech in Client Projects

Feb 14, 2023
FRONTEND ENGINEERING

What Trading UIs Actually Need

Nov 22, 2022
FRONTEND ENGINEERING

React Hooks Changed How I Think About State

Mar 8, 2021
FRONTEND ENGINEERING

What My First Real Client Taught Me About Frontend

Aug 14, 2020
FRONTEND ENGINEERING

Why I Stopped Reaching for Component Libraries First

Nov 13, 2019
FRONTEND ENGINEERING

CSS Grid Finally Clicked — Here Is What Made It Make Sense

Jul 4, 2018
FRONTEND ENGINEERING

The Case for Boring Tech in Client Projects

Feb 14, 2023
FRONTEND ENGINEERING

What Trading UIs Actually Need

Nov 22, 2022
FRONTEND ENGINEERING

React Hooks Changed How I Think About State

Mar 8, 2021
FRONTEND ENGINEERING

What My First Real Client Taught Me About Frontend

Aug 14, 2020
FRONTEND ENGINEERING

Why I Stopped Reaching for Component Libraries First

Nov 13, 2019
FRONTEND ENGINEERING

CSS Grid Finally Clicked — Here Is What Made It Make Sense

Jul 4, 2018