Writing a command system in JavaScript

If you search Google for “text adventure” and open the Developer tools, you get a neat little text adventure game to play, which involves the blue G finding his friends red o, yellow o, blue g, green l, and the always quirky red e.

Pretty hard

I s…

If you search Google for “text adventure” and open the Developer tools, you get a neat little text adventure game to play, which involves the blue G finding his friends red o, yellow o, blue g, green l, and the always quirky red e.

text-adventure

Pretty hard

I started wondering how they did this: They implemented a whole command system without using any external stuff, with only plain JavaScript. And so at once I started digging through the code, immediately stopped because it was obfuscated, and started thinking. The result was this simple trivia quiz (hosted here).

Quiz!

I’m really bad at trivia.Wondering how I’m styling those logs? Check out this explainer I wrote



How does this even work?

yes, no, north, moon, they all don’t seem to be anything. If you open the DevTools and run them, you’ll just get a Uncaught ReferenceError: yes is not defined. But that gives us a hint – why don’t we define it?

const yes = "yes";

// Later...
yes
// => "yes"

That works perfectly, but we have no way of saying whether it was called. But then, we can use getters.



Quick demo of getters

const obj = {
  foo: 'bar',
  get foo() {
    return 'something entirely different'
  }
}

obj.foo //=> 'something entirely different'

We obviously can’t use getters on global variables, but we can just set the variables on window and add getters to them:

Object.defineProperty(window, "yes", {get: () => {
    // Do something
    console.log("Got yes");
    return "yes";
}});

yes
// => "yes"
// => "Got yes" (logged to console)

And that’s basically it, you can just keep setting variables statically or dynamically, and you basically get a command system!

What are the uses of this? I dunno, all this can be done by using regular functions instead of this. Maybe easter eggs? Maybe for some debugging?

I can’t wait to see people writing code like this:

Object.defineProperty(window, "main", {get: () =>  {...}})

main;
// Wait, is main supposed to be a function or something?
// Linters are gonna be angry...

Print Share Comment Cite Upload Translate
APA
Siddharth | Sciencx (2024-03-29T02:20:01+00:00) » Writing a command system in JavaScript. Retrieved from https://www.scien.cx/2021/07/30/writing-a-command-system-in-javascript/.
MLA
" » Writing a command system in JavaScript." Siddharth | Sciencx - Friday July 30, 2021, https://www.scien.cx/2021/07/30/writing-a-command-system-in-javascript/
HARVARD
Siddharth | Sciencx Friday July 30, 2021 » Writing a command system in JavaScript., viewed 2024-03-29T02:20:01+00:00,<https://www.scien.cx/2021/07/30/writing-a-command-system-in-javascript/>
VANCOUVER
Siddharth | Sciencx - » Writing a command system in JavaScript. [Internet]. [Accessed 2024-03-29T02:20:01+00:00]. Available from: https://www.scien.cx/2021/07/30/writing-a-command-system-in-javascript/
CHICAGO
" » Writing a command system in JavaScript." Siddharth | Sciencx - Accessed 2024-03-29T02:20:01+00:00. https://www.scien.cx/2021/07/30/writing-a-command-system-in-javascript/
IEEE
" » Writing a command system in JavaScript." Siddharth | Sciencx [Online]. Available: https://www.scien.cx/2021/07/30/writing-a-command-system-in-javascript/. [Accessed: 2024-03-29T02:20:01+00:00]
rf:citation
» Writing a command system in JavaScript | Siddharth | Sciencx | https://www.scien.cx/2021/07/30/writing-a-command-system-in-javascript/ | 2024-03-29T02:20:01+00:00
https://github.com/addpipe/simple-recorderjs-demo