As a hatchling dev early in my bootcamp career, I’m constantly on the lookout for new metaphors to help rewire my brain and make it all make sense. One that’s been a helpful scaffold for me as I get deeper into JavaScript is thinking about it in terms of my favorite classic deckbuilder, Dominion.
A little about Dominion: it’s a very rad, much-expanded game from 2008. You play by building a deck and drafting a hand out of a bunch of different types of cards. On paper, at least, you win by getting the most victory points, but how you get there can be (much like a certain programming language) a little more…dynamic.
Starting to learn JavaScript, with its multiple ways of saying, doing, or making the same things, really reminded me of Dominion, initially from the parallels between chaining functions, and action cards, but once I started thinking about it, the similarities just kept coming. Let’s talk about a few in an internet-friendly numbered list:
Setup: On the most basic level, drawing and prepping your hand before play (especially if that round of play is a bunch of chained action cards) is the tabletop equivalent of declaring variables before outlining some functions with them.
Functions and Actions can both be chained, even with other (code/card) blocks: When I first started trying to write in JavaScript, the idea of calling a function as the logic of an event listener that is itself nested inside yet another function was a little brain breaking until I thought about it like Dominion, where as long as you have actions, you can “chain” action cards.

append() and the vassal If in this metaphor, the DOM is like the current field of play, any card like the vassal (which lets you draw the top card from your deck and play it if it’s an action) append to it outside of regular actions (functions) feel pretty similar to append().
Closures and Harbingers Is something out of scope? Maybe if you use a closure (in this case one of the cards that lets you go back into your discard pile, like the harbinger) you can get access to cards/variables that you otherwise wouldn’t!
Reactions and .thens reactions (like moat) often are immediate responses to other cards, like attacks, and can be chained with other actions, the same way a .then at the end of a fetch request can have a rendering function nested inside.
- Sequence of Execution JavaScript, like Dominion cards, needs to get resolved in the order it’s written/played (unless you have sneaky workarounds, like the “defer” script attribute, moving your script tag to the bottom of or the harbinger or the spy, both of which “disrupt” the expected sequence of draw, play, and discard.
- Function and Variable Delete The same way functions and variables are deleted on page close, dominion hands are lost after they’re played. (This one’s kind of an easy comparison, I suspect)
I hope these analogy explainers were as helpful for you as they are for me, and if there are any that I missed or could've explained better, leave them in the comments- I'm excited to keep learning!
Works Used:
- “List of cards,” List of cards - DominionStrategy Wiki, https://wiki.dominionstrategy.com/index.php/List_of_cards (accessed Aug. 10, 2023).
- D. X. Vaccarino, “Dominion.” 2008. Rio Grande Games, Placitas, NM. (Accessed August 10, 2023).
- N. Knutsen, “Complete Rules for Dominion and All Its Expansions,” Shuffles Public Rulebooks- Dominion, https://www.shufflestulsa.com/public/rulebooks/Dominion.pdf (accessed Aug. 10, 2023).
Top comments (0)