Why a Tentacled Metaphor Made JavaScript Click
Years ago, while working toward a senior developer role, JavaScript felt like an immovable barrier. Then I encountered a single sentence in Marijn Habernecker’s Eloquent JavaScript about variables:
“You should imagine bindings as tentacles rather than boxes. They do not contain values; they grasp them — two bindings can refer to the same value.”
— Marijn Habernecker
This childish comparison fixed a fundamental misunderstanding that text-heavy explanations never had. A box or bucket implies a value sits inside it — but how could the same value exist in two different containers at once? The octopus metaphor dissolves that puzzle: two tentacles can certainly grip the same object. That clarity made me wonder why more JavaScript learning material couldn’t be this intuitive.
The Gap in Visual Learning Resources
Between elementary loop exercises and building actual programs, there’s a frustrating chasm. I searched for material that could bridge it visually, scanning books, YouTube, and online communities. Most resources fell into three groups:
- Gamified experiences like CodeCombat and ElevatorSaga are engaging but procedural. You learn to use concepts rather than understand their nature.
- Graphical syntax breakdowns, such as Lydia Hallie’s “JavaScript Visualized” series and array cheat sheets, transform dense jargon into diagrams but rarely explain deeper connections.
- Analogy-driven tutorials like CodeAnalogies are memorable per-topic, yet the analogies are disconnected. A newspaper analogy for objects doesn’t extend to prototypal inheritance.
Most of all, I wanted something memorable — a mental model I could recall during interviews or while debugging, not just another lesson consumed and forgotten.
The First Attempts Failed
I explored mnemonic techniques, including the “memory palace” method used by competitive memorizers. The idea: transform any concept into an absurd, vivid image. Ridiculous images are easier to retrieve.
My first JavaScript illustration was a stingray street vendor selling fruit — a mnemonic for arrays. A square device picked up individual items, a monocle symbolized search methods, and a lasso hinted at loops. Yet this imagery was useless during actual work. Remembering that arrays have search methods doesn’t teach you how to use .find() or .filter(). I learned my first big lesson:
We can’t learn a programming language using pure mnemonic methods because memorizing lists of things does not help you understand underlying concepts.
My second attempt, depicting functions, failed differently. I drew paratroopers dropping through parentheses into a pool where they argued over arguments. But this abstraction incorrectly treated parameters and arguments as identical, with position as the only difference. Flawed theory baked into a visual makes you a worse developer.
The Atomic Focus
The solution was to scale down dramatically. If variables are tentacles, what exactly are they grasping? Values. And if code flows like a river, then values are islands.
Each island has a fixed location and size. That simple model wasn’t directly actionable, but it formed the foundation I needed to base every following concept on connected layers.
From Analogy to Mental Model
By layering visuals on top of that foundation, I built an entire universe. Islands become part of a broader picture of JavaScript: genies for functions, evil sorcerers for invocation, flying ships, and turtle pilots. Each element was tied to actual behavior, giving me what I call “imagimodels“ — mental models requiring imagination to interpret any code I encountered.
My earlier stingray and paratrooper failures made one thing clear: focusing on lists of features was ineffective. What mattered was understanding what things are, not just what they do. I had relied on copy-pasting working code and copying patterns, most often without understanding why they worked.
A memorable visual isn’t enough on its own — it needs a narrative to give it context. For closures, I built richer images:
For a term like “execution context,” I connected it to the phrase “executor got hex,” imagining a medieval executioner with a sorcerer’s spell. The spell intentionally ties back to function invocations (parentheses). This layering builds what I call a knowledge tree — not a directory of every fact, but a connected, visually retrievable map of how concepts interrelate.
That this technique works in practice: I later used it to teach other developers, calling the project “The Great Sync.”
Visual Learning Complements, It Doesn’t Replace Practice
None of this abolished the need to write code. Looking at images rarely compiles into working software. But my biggest takeaway isn’t that alternative forms of learning should replace deliberate practice — it’s that they can exist alongside it. Visual resources, mnemonic devices, and absurd illustrations all have a place. They help you step outside the editor and see JavaScript from another angle.
The octopus worked because it changed how I understood the nature of a value. The more imaginative and varied your learning toolkit, the better your chances of finding the one metaphor, model, or method that unlocks the language for you.
