A few years in the past, I set my sights on turning into a senior developer. I achieved that aim! I want I might say it was a matter of laborious work and perseverance, however no, that wasn’t sufficient. JavaScript stood in my approach, and it was whereas grappling with it that I got here throughout one foolish sentence in Marijn Habernecker’s basic guide, Eloquent JavaScript. On the subject of variables, it says:
“It is best to think about bindings as tentacles relatively than bins. They don’t comprise values; they grasp them — two bindings can seek advice from the identical worth.”
— Marijn Habernecker
An analogy like this falls into the class of infantile comparisons meant largely for uncooked learners to know fundamental ideas. They’re enjoyable and entertaining however not one thing that may flip you right into a senior developer.
But it surely struck me. Even in a small approach, this infantile metaphor made me a greater developer. It fastened a basic misunderstanding: we don’t put values in variables. If variables did behave like buckets or containers, how might this be true?
const count1 = 10;
const count2 = count1;How is it doable to have the identical 10 worth in two completely different buckets? The identical factor can’t be in two locations on the similar time, proper?!
However the octopus metaphor solved this dilemma for me. Two tentacles can definitely seize the identical worth! It’s a visualization that reveals the underlying nature of values! Give me all the world’s pc science literature on variables at my fingertips, and it could not be as helpful to me as this imaginary octopus.
Why can’t all of JavaScript be like this?
My Search For Extra Visible Studying Materials
I observed a irritating hole between doing the easy loop and performance workouts you discover in most newbie programs and truly constructing applications.
The issue? I nonetheless wasn’t on the degree the place I might decipher reams of dry technical textual content. I wished extra octopuses!
So, I appeared in all places for them. I scanned the web for visible and summary studying assets: Google, YouTube, Medium, TikTok, and each guide I might presumably discover. I found most “visible studying” materials suits into considered one of three teams.
First is a gamified studying expertise, just like the learn-while-playing platforms CodeCombat and ElevatorSaga. Whereas splendidly artistic and filled with tales and characters that assist you to construct actual applications with real-world patterns, any such studying is procedural. The main target is on utilizing ideas relatively than diving into what they’re.
The second group is the graphically represented syntax or technical clarification. Ever seen an array of apple and orange emojis? Or diagrams of the occasion loop? These can break down scary ideas into an easier-to-digest visible medium. They are often highly effective visible aids that rework dense technical jargon. Examples embrace Lydia Hallie’s good “JavaScript Visualized” sequence in addition to cheat sheets like this one from Ram Maheshwari.
The third group is nearer to what I sought: the analogy-driven studying expertise. Builders love a great analogy. We use them on a regular basis in weblog posts and video tutorials. They assist clarify very technical ideas. One useful resource I discovered, CodeAnalogies, is especially spectacular, with analogies for every thing from content material distribution networks to MVC frameworks.
However analogy-driven studying has limitations for me. All the analogies have been disconnected! That they had no relation to at least one one other. They have been nice for wrapping my head round an remoted subject however not for seeing the massive image. The factor with JavaScript is that every thing is linked. How can a newspaper analogy for objects be prolonged to explain prototypal inheritance?
Lastly, I got here to understand the factor I wished most was one thing memorable. I wished to consolidate every thing I used to be studying into a visible format that was simple to recall after I wanted it — whether or not in an interview or whereas writing code. Sadly, most analogies are fully forgettable. What number of canine, cat, and banana arrays can one take?
Constructing My Personal Visible Representations
There was just one resolution to this: create my very own visible representations for my JavaScript information tree. However first, I wanted to determine how one can make one thing stick in my reminiscence.
I’ve all the time had an curiosity in mnemonic reminiscence strategies. These are reminiscence “hacks,” such because the “reminiscence palace”. They assist visually encode giant quantities of knowledge for simpler recall. World reminiscence rivals use it to recollect the order of a number of decks of playing cards and random quantity sequences.
The essential precept is that this: You may take any thought and switch it into a picture. For instance, an array may very well be an ocean stingray. That’s good, however nonetheless not sufficient. The trick is to make the psychological picture as bizarre, humorous, and ridiculous as doable. Photographs which can be out of the atypical are what stick with reminiscence.
My First Large Lesson
So, right here is considered one of my very first mnemonic representations of JavaScript arrays:
I used to be so pleased with this. We’ve got a stingray avenue vendor promoting fruit, reminding me that arrays maintain information. He has a particular sq. machine for choosing up particular person objects that signify the sq. bracket syntax for choosing objects. He has a monocle to remind me that arrays have strategies for looking out. He has a cowboy lasso that refers to loops, and so forth.
It’s a enjoyable depiction. However I used to be attempting to study JavaScript to land a job! If this ridiculous monocled stingray didn’t make me a greater developer, it defeated the aim. The last word check: would I take advantage of this picture of an array streetseller as some extent of reference whereas coding? Nope. It turned out to be fully, completely ineffective.
I didn’t want a solution to keep in mind the time period array. Understanding they’ve strategies to go looking doesn’t inform me how I can carry out searches. Even a Swiss Military knife tail with all the primary array strategies like .kind(), .push(), and .unshift() proved pointless with a two-second Google search.
This was trickier than I believed. I discovered my first massive lesson:
My Second Large Lesson
After a lot reflection and lots of, many extra failed makes an attempt, I attempted to signify one thing I had all the time struggled with: features. What would the make-up of a perform seem like? I got here up with this beautiful poor illustration:
On the high, we’ve got foolish paratroopers that signify parameters. We ship parameters via the doorway, ( ), and so they find yourself in a contained pool (i.e., the perform physique). They begin arguing, and that’s how we are able to keep in mind arguments.
Sadly, this went into the failure bucket, too. Representing syntax isn’t useful. It’s higher to realize familiarity via a lot of apply writing it. There have been additionally harmful flaws within the analogy. It prompt parameters and arguments are the identical; the one distinction is their place.
An abstraction like this with flawed principle baked into it could truly make me a worse developer! I wanted to dig deeper into what issues actually are.
The Breakthrough
The answer was to go atomic. Specializing in the smallest idea would give me the primary layer I might use to color an image of JavaScript. I circled again to our pleasant octopus, the place this all started.
What have been the tentacles greedy? Values!
Values are sometimes glossed over and don’t appear to be the important thing to unlocking the mysteries of JavaScript. However this straightforward thought was a breakthrough for me: if the code flows, we are able to think about the flowing as an ocean or river. What do we discover on this movement? Islands!
Values are the islands, and every island has a set location and measurement. That was it! It was precisely what I used to be in search of. It nonetheless didn’t enhance my expertise as a developer. However I knew it had potential.
From Analogies To Fashions
Layer upon layer, I started to construct up a imaginative and prescient of JavaScript by specializing in what issues are and the way they’re associated to different issues. First got here islands. Then got here genies, evil sorcerers, flying ships, and turtle pilots. My pleasure grew because the smaller layers, the basics, may very well be mixed to supply a big-picture understanding of extra advanced matters like closures.
Every picture was not a easy analogy. It was a psychological mannequin — a mind-set. It supplied a lens to interpret every idea however required creativeness. I name them imagimodels.
I knew from my previous makes an attempt that specializing in lists is ineffective. The key lies in what issues are relatively than what they do. After I give it some thought, that was my downside with studying JavaScript all alongside. I had no concern finally getting one thing to work. The issue was I largely didn’t have the faintest thought why.
Rising A Memorable, Multi-Layered Universe
With this strategy, an abstracted world of JavaScript was erected:
This picture helps me determine basic JavaScript ideas for task, native scope, and primitive values. In fact, it isn’t a standalone picture, and also you gained’t have the ability to determine these ideas with out context. It requires a narrative to weave JavaScript and analogy collectively.
A story is what drove the opposite ideas into the image, fairly actually. Right here, we are able to see a closure:
The subsequent picture makes use of mnemonic strategies for remembering helpful terminology. Not like arrays and parameters, “execution context” felt like one thing I might learn in an IBM handbook from the Seventies. It was a scary time period that deserved a scary illustration.
I discovered a connection between “execution context” and the phrase “executor received hex,” which impressed an illustration of a medieval-style executioner holding an axe in a single hand and a hex, or sorcerer’s spell, within the different.
Why the spell? It’s not random. It builds on earlier current layers representing different sub-concepts. The spell is tied to our understanding of a perform invocation and makes you consider wizards and sorcerers, proper? And it’s the parenthesis in each perform name.
This begs the query, what’s a perform? Is it the results of the hex or the execution? Is it the invocation itself? Solely a agency understanding of objects would assist me determine what actually is occurring right here.
As you possibly can see, the visible layers construct upon each other, like a tree with a central trunk branching out in several instructions. It’s the information tree I wished — not one containing each element about JavaScript, however a central, unified mnemonic useful resource that may very well be in contrast and evaluated towards, added to, argued over, and above all, retrieved after I wanted it.
I name my illustrations of JavaScript ideas “The Nice Sync”, and I take advantage of them to proceed to develop my understanding. Additionally it is one thing I now use to show others.
A Celebration Of Different Studying Approaches
Was all of it sunshine and daisies for my JavaScript studying journey from this level on? Did constructing this world make me ace each JavaScript quiz I wanted to cross to get that senior-level job?
Nope! I want the very best of luck to anybody who thinks they’ll study JavaScript just by a number of photos.
My largest takeaway from all my studying efforts is that this: Regardless of The Nice Sync fixing so lots of my private struggles with the language, is it any higher than any single one of many assets I discussed? Does it have any use with out precise coding — the tireless, painful strategy of attempting to get your code to work? Actually not.
It’s one software, amongst many, to “see” JavaScript in another way and escape the confinement of a code editor or YouTube tutorial.
All of those approaches have a good time the variability and infinite artistic potential of the training expertise. And the extra we’ve got, the extra learners who’re caught on JavaScript can uncover new routes to understanding.
Additional Studying on Smashing Journal
(gg, yk, il)
