Javascript: The Gathering
This week, our cohort embarked on the third of the important languages of Front end Web development. The dreaded Javascript. Personally, Javascript is one of the stumbling blocks when I was trying to teach myself how to code online. I’ve always been a little hesitant about it but seeing as it’s one of the essential pieces of this new venture, it’s kind of necessary. To use an analogy, if a website is a house, the HTML code is essentially the physical structure. The walls, floors, ceiling, doors and windows are all created in the structural framework. Now a house isn’t a home without furniture, decorations and paint. That’s where CSS comes in, that language takes care of the layout and general design elements. Javascript is the wiring and plumbing to the house, the things that a house needs to function.
Metaphors and analogies have been an essential way for me to pick up these new languages. One of our instructors used an amazing metaphor that finally let some of the core concepts make sense. When discussing functions, we were told to think of functions as wizards, by declaring functions you are essentially trapping a wizard and making it do one specific job. This sparked something in my head.
Now for a little personal history, I’ve been an avid player of a little card game known as Magic the Gathering since I was 9 years old. The game is sorta simple, where two wizards (later errata’d to planeswalkers) are in a duel in which they play spells on each other to achieve victory. There are different spells and how they affect the game depends on what is written on the cards.
That’s where it clicked, the cards. Yes, the functions are wizards but how I’m going to reframe this is that I’m the wizard!
The logic I’m taking with this is that I the coder am the player in a game of magic, the cards are my functions in which I can manipulate the flow what I need my code to do. Much like in Javascript there are rules that need to be followed in order to achieve one’s goal, the cards play in the same way. certain keywords like async and await (which are two keywords that work in unison to tell a function marked await to wait until a marked function named async goes off first) and the instant card type (which is a spell type that can be played whenever an action causes an event to trigger a window that a spell can be played in) and literally as I’m typing this I’m putting this all together.
Infinite loops are also a possibility, however, in Javascript, they have a tendency to completely crash a user’s browser and in Magic, they have the tendency to win you the game. I’ve got a couple of examples to illustrate:
let number = 23;
while (true) {
number = number + 1
}
}This is an infinite loop in Javascript, the function will keep running as long as the statement is true, and because of this, the number will tick up infinitely and in doing so your browser crashes. Game Over.
The above interaction is one of my favourites. It’s also a great way to get booed out of your local game store. This combo also runs an infinite loop until your opponents all perish. All a player needs after these interactions are on the play state is simple to gain a single life point or deal a single point of damage. Doing so begins the cycle of opponent losing life and player gaining that much life back, which then, in turn, causes the opponent to lose a life and over and over again which leads to an end of the game.
I’m sure I’ll be able to find a few more analogies as the studies continue, It’s really cool to see that other magic players code, and looking through APIs and other cool interactions that have been created to make websites I use on a weekly basis.
