Programming Analogies

C#, JavaScript, React Native, and other goodies

—> This is a work-in-progress article for analogies about programming <—

When learning a new concept, there is always a moment that happens in the brain when things “click”. That moment occurs when the following thought happens (whether consciously or subconsciously):

“Oh, this new thing is like X.”

The brain’s capacity to draw similarities between widely-disparate categories is the force that drives learning. This is just another way of saying that brains are pattern-recognition devices.

Some of you know that I recently started learning how to program in C# and JavaScript. I decided to write this article to demonstrate some of the analogies that I’ve made along the way that have helped me to understand various programming concepts.

Some of these analogies may not make sense to you, but I hope they inspire you to come up with your own. Feel free to share yours in the comments below:

Without further ado…

The Main() method in C# (or the App() function in JavaScript) is like the theatre stage in a play

In a play, actors come on and off the stage at their respective times, execute their lines, then disappear. If they have other lines later in the program, then they are kept on-deck. Otherwise, the actors may change out of their clothes since they are finished.

In a similar fashion, lines of code in the Main/App program are sequentially executed. Each of them “speaks their lines” then moves aside for the next “actor”. If a particular object will be used again later in the program, then the program will keep the object “in-memory”. Otherwise, the program will get rid of the object (called “garbage collection”).

OOP principles are like actors in a play

Continuing with the analogy above, the idea of actors in a play captures some interesting ideas about OOP (object-oriented programming), specifically Abstraction and Encapsulation.

Each actor in a play presents a simple interface to the audience. As an audience member, you don’t care how they put on their costume or what they did to memorize their lines - all you care about is that they play their part well. This is also true for the other actors in the play. They don’t need to know everyone’s lines, nor do they need to have access to every other actor. In short, each actor demonstrates the principle of Abstraction.

Each actor in a play is also a fully-functioning, self-contained unit. Actors have everything they need to play their part, from memorizing lines to customized costumes to hair & makeup. Each actor represents a character in the play, and they have everything needed to portray that character accurately. In short, each actor demonstrates the principle of Encapsulation.

The Main() method/App() function is like the brain of the human body

The brain receives signals from throughout the body and coordinates them into a coherent structure. This allows for the smooth execution of motor programs. If the brain messes up the coordinator, it’s sort of like an error in a computer program. Parkinson’s, epilepsy, or other neurological conditions that disrupt normal motor function are like errors in your code.

A programming library is like an email signature

Email providers make it easy to create custom signatures that are appended to every email you send. You COULD manually write the signature every time, but why re-invent the wheel? In the same way, programming libraries have a bunch of saved “signatures” that you can use to structure your code. Inserting these “signatures” provides some default structure to your program and allows you to focus on the unique logic that is specific to this program, rather than re-writing basic functionality that is common to all programs.

Types in C# are like character classes in World of Warcraft

When we talk about the Type of an object, we are simply talking about the class/library of members that it can call from. If an object is of the "string" Type, then that means it can call from the String library. If an object is of Type "int", then it can call from the library of members that are specific to "int" objects.

Type tells us what the object is and is not allowed to call from. It's a qualifier: "Oh, you're a Mage? Here are the skills and attributes specific to you. You over there, what Type are you? Oh, a Rogue? Okay, here are some different attributes (properties) and attacks (functions) that are specific to you."

A Router is like sending a postcard through the mail

When sending a postcard, you need to specify two things: the address of the recipient and the name of the recipient.

The address of the recipient provides the post office with the information they need in order to effectively route the postcard. Send a postcard from California to Texas will follow a different path than sending it to Maine.

In the Internet world, the equivalent of an address is an IP address. The format of an IP address looks something like 192.168.4.987 (four 8-bit numbers). Just like in the physical world, the IP address tells the “post office” (a network of routers) which way to send the digital information.

Once the postcard arrives at its destination, it must then be sorted and delivered to the proper recipient. Imagine you sent a postcard to a friend at their place of business and their company has 1,000 employees. Just sending the postcard to the office won’t allow your message to arrive - you need to specify the name: “Attn: Marcus Aurelius, Strategy Department”.

In a similar fashion, the Internet world has a second address that corresponds to the name of the device recipient: the MAC address. The syntax of a MAC address looks like 00:0a:83:b1:c0:8e (six hexadecimal pairs). When digital information arrives at the proper IP address, it is then routed to the proper MAC address in order to get to the intended recipient.

In C# (or TypeScript), an access modifier is like a peephole in a fence/key to a door/window in a house

A class is like a huge fence around a compound. An access modifier is like a peephole that allows someone to view inside the compound, but only at the places that you decide.

A class is like a house. An access modifier is like a window into the house. Different windows provide different levels of visibility into the inner workings of the house.

An access modifier is like a key to a door. You can decide which keys you give to which people depending on which rooms you would like them to have access to. Sometimes, you let people into a room so they can grab an item themselves. Other times, you want to restrict access to certain rooms, in which case the person has to ask authorized personnel for the item. This is analogous to using getters & setters to standardize the way in which users of your code can access certain areas.

In JavaScript (ES6+), Classes and Async/Await are like replacing your current remote control with an Amazon Fire Stick

This analogy isn’t perfect, but let’s roll with it.

In JavaScript, the concepts of “Classes” and “Async/Await” were introduced in ES6. Programmers refer to them as “syntactic sugar”, meaning they do (essentially) the same thing as previous concepts but they abstract away some of the complexity.

Both of these remotes can do the same things, though how they do it is different. The Amazon Fire Stick defaults to a simpler interface but still retains the same functionality by introducing a more powerful back-end (voice control, advanced search, etc.).

Similarly, Classes and Async/Await are simpler interfaces over the older concepts of Prototypes and Promises, respectively. Using the new syntax essentially does the same thing as the old syntax - it’s just easier to work with for the user.

Curly braces {} in JSX are like a Portkey from Harry Potter

All you Harry Potter fans know that a Portkey is an object imbued with a certain type of magic that transports a person to a specific location when the object is touched.

When working with JSX - as in the case with React/React Native - we can use curly braces to do something similar.

JSX stands for JavaScript & XML (or JavaScript eXtension). It is a combination of a markup language (XML) and a programming language (JavaScript). One of the ways we can let the JavaScript engine know we want to access JavaScript functionality rather than XML is by using curly braces. This process is often referred to as interpolation.

Credit: Ali Reubenstone

In the image above, imagine you’re “walking” along your line of code when you stumble across the second instance of the object {buttonText}. Just like a Harry Potter Portkey, you are teleported back to the first instance of the object:

const buttonText = ‘Click Me’;

So, just remember: when you see curly braces in React/React Native code, there’s probably some special JavaScript functionality being employed.

…

Have an analogy of your own? Leave it below!