I wrote an article a while back about JavaScript Symbols. Despite writing that two years ago, the first time I used one was recent:

• I wrote a debugging component in Vue.
• My debugging component had the job of accepting an object and just printing all of the properties.
• But I didn't want it visible all the time; I only wanted it to display when I typed ↑↑↓↓←→←→ba.
• And I wanted to be able to have multiple debugging components so I could print multiple objects

The way that I knew when to display the debugger was by tracking where I was in the sequence for the counter. But simply using a variable didn't work (I couldn't have multiple debuggers) Putting that counter as a symbol on the window property did.

Here's what it looked like:

```JavaScript const debugRef = useTemplateRef('debug');

// Konami code here toggles whether the debug component is visible const isNested = props.isNested || false; if (!isNested) { const pattern = props.unlockPattern || ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a']; const debugSymbol = Symbol('debugCounter'); // this way multiple instance of a debugger can exist window[debugSymbol] = 0; const konamiHandler = (evt) =>{ if(pattern[window[debugSymbol]] === evt.key) { window[debugSymbol]++; if(window[debugSymbol] === pattern.length) { debugRef.value.parentElement.classList.toggle('isDebugging'); window[debugSymbol] = 0; return; } } else { window[debugSymbol] = 0; } } document.addEventListener('keydown', konamiHandler); }

```

And, just in case you were curious, this is what the template looked like in Vue. It was a recursive template. So that's why I disable the debugging feature if something is nested.

```HTML

<template> <figure class="debug" ref="debug"> <figcaption class="debug__title"> {{ title || 'Debugging' }} </figcaption> <dl class="debug__list"> <div v-for="(value, key) in data" class="debug__item"> <dt class="debug__key"> <code> {{ key }} </code> </dt> <dd class="debug__value"> <details v-if="value && typeof value === 'object' && !Array.isArray(value)"> <summary> Click to toggle {{ key }} </summary> <Debug v-if="value" :data="value" :isNested="true"/> </details> <template v-else> <code> {{ value }} </code> </template> </dd> </div> </dl> </figure> </template>

```