Adding Humor to Javascript

Want cool Future Vision Merch? Check out our store here

When I got to Flatiron School I was hit in the face with endless material. Although it excited me, the fast-paced learning environment was a lot to handle. A program divided into five sections, the Flatiron School Web Development Immersive covers five topics in each three-week section. In order to get in the mindset in which I believed I would be most productive, I decided to develop some techniques to assist me in doing so.

As I am someone who finds humor in everything I found a way to incorporate that into my career in programming. And that…is how I started using humor to understand the fundamentals of Javascript.

Var, let, or const — as a middle schooler…

The three identifiers, var, let, and const, each have a different purpose when writing Javascript code. It is important to distinguish between the three in order to understand how they how variable declarations are read by the machine. I kept asking myself, how am I supposed to remember which one to use and when? So I took on the persona of a middle school gossip queen.

You are a middle schooler named Samantha and you thought Karen was your BFF. You announced it to the ENTIRE grade and everyone knew that you are Karen were going to be friends forever. Monday rolls around and Karen decides she is not your friend anymore. Similarly in Javascript, you can both redefine and reassign a variable declaration with ‘var.’ If you’re going to really embody Karen, you are going to redefine and your relationship with Samatha to a state of non-existence and/or eventually change the terms to fit your convenience.

Define

var you = “are my bff”

Redefine

var you = "are not my friend anymore"

Reassign

you = "suck"
// the variable you is now "suck"

Eventually, you(Samantha) and Karen sort your difference and make a pact that no matter what you will be friends forever. So Karen goes out and hangs out with all her other friends. Yeah, you may feel left out but deep down you remember the unbreakable pact. Similarly in Javascript, using the identifier ‘let’ allows you to reassign but not redeclare a variable. So Karen can reassign her friendship with Samantha to the type of friendship where you only see your friends on weekends(because your mom made you). However, Karen can’t redeclare her friendship with Samantha later on when she forgets about the pact they made.

Declare

let you = “be my BFF 5evr”

When you try to redeclare

let you = "nah not friends 5vr sry"
// Uncaught SyntaxError: Identifier 'you' has already been declared at <anonymous>:1:1

Reassign

you = "you"
// "you"
you
// "you"

The end of middle school rolls around, and you made this pact. You(yes, Samantha) are so happy because Karen is forced to uphold this pact forever and ever. Similarly in Javascript, using the identifier ‘const’ prevents you from both reassigning and redeclaring a variable. No matter what Karen does, she is forced to be Samantha friend until the end of eternity.

Declare

const you = “have to be my friend 5evr”

When you try to redeclare

const you = “are not my friend anymore”
// Uncaught SyntaxError: Identifier 'you' has already been declared at <anonymous>:1:1

Lucky you?

When you try to reassign

you = “are not my friend anymore”
// Uncaught TypeError: Assignment to constant variable.
    at <anonymous>:1:6

Lucky you, again?

Functions…haha…

Because functions are funny, right?

Knock knock?

Who’s there?

aFunction functionwho() {
   // Function code is not funny
}

Conditionals…haha…

Because conditionals are hilarious, right?

if (me > all other humans) {
   // Then why am I not the queen of the universe
}

Ternary Operator

will you date me === true ? “I am so happy” : “I am so sad”

Event Delegation

Did my parents REALLY DO THAT?

When I was first introduced to the concept of Event Delegation my questions were…

• Who has access to who?
• How does one access the other?

But when I added humor to the equation everything fell into place. Think of it this way — do you know EVERYTHING your parents have done? Did dad really smoke that one joint in college? The answer is NO. There is no way to really know what your parents did and didn’t do. Similarly, in Javascript a child element does not have access to the information in the parent element.

Contrastingly, mom and dad are SO ANNOYING and put a tracker on your phone. Now, do you think they have access to your life (your texts)? YES. Similarly, in Javascript, a parent element has access to all information in its child elements.

Thanks to the power of the DOM tree, outer elements have access to all elements beneath them.

<div id=“Grandpa”>
    <div id=“Mom and Dad”>
        <div id=“Little old me who has no secrets”
        </div>
    </div>
</div>

In real life terms: Since dad put a tracker on your phone, he knows everything little old you is up to. Funny enough, Grandpa put a tracker on Dad’s phone and now know everything BOTH of you are up to. Like is privacy even possible anymore???

Long story short, I make Javascript funny to make it more enjoyable and I add a story to every concept to make it more memorable. What’s your method?