Welcome to the first post in this new series, Can you spot the bug? Here, you’ll be challenged to find the bug in a code snippet without running it.
Ok, I know what you’re thinking, “this is such a contrived challenge; why would you ever need to debug code without running it?” 🤔
Well, other than being a fun challenge to see if you’ve got an exceptional eye for the Where’s Waldo? of bugs, being able to spot bugs without repeatedly running the code can save you a lot of time.
…especially if the bug doesn’t produce obvious error messages. (If you’ve ever had to spend hours debugging a logic bug, you know what I’m talking about!)
Rules
- You may not run the code nor look at any error messages produced by the code. 🙈
- Each code snippet is accompanied by a specific scenario of the code’s unexpected behavior. Your task is to find the bug that causes this behaviour. 🔎
- If you want to challenge yourself, try not to use Google or refer to documentation! 😱
- The code will often contain tricky constructs that might mislead you into thinking a certain part is the buggy culprit when it’s actually valid behavior! For the greatest challenge, try limiting yourself to one guess! 🙂
A Quick Disclaimer
If you aren’t able to spot a bug, it doesn’t mean you’re a bad programmer!
Having an eye for spotting bugs comes with experience: as you work with more and more code, you’ll encounter and become familiar with more and more bugs, including the more obscure ones.
This blog post series is primarily a teaching resource: a resource for you to learn about some of the more nuanced and non-obvious behaviors of common programming languages.
With that said, put on your thinking cap and try to spot the following hidden bug! 🧢
Translating Text
This is a bug that I encountered a few years ago near the beginning of my journey learning JavaScript. It’s a self-contained HTML file containing some HTML and some JavaScript that tries to translate some text:
<!DOCTYPE html>
<html>
<body>
<div id='text'>Hello, world!</div>
<select name="languages">
<option value="english">English</option>
<option value="french">French</option>
<option value="spanish">Spanish</option>
<option value="python">Python</option>
</select>
<button onclick='translate()'>Translate Text</button>
<script>
function translate() {
const selectedOption = document.querySelector('select[name="languages"]').value
text.innerText = {
english: 'Hello, world!',
french: 'Bonjour, monde!',
spanish: '¡Hola, mundo!',
python: 'print("Hello, world!")'
}[selectedOption]
}
</script>
</body>
</html>
This code renders some text in a div element. Underneath it, there’s a dropdown that allows you to select a language out of four languages: English, French, Spanish, and Python.
Yes, Python is a language; I didn’t specify they had to be spoken languages 😛
Underneath the dropdown, there’s a Translate Text button that when clicked, will call the translate() function defined on line 14. The translate() function replaces the text in the div with the translation of “Hello, world!” in the selected language from the dropdown.
However, if you try running this code in a browser and select a language from the dropdown (other than English), clicking the Translate Text button doesn’t seem to do anything, no matter how many times you click it.
There’s a bug in this code. Where do you think it could be? 🧐
For some hints and the full solution, check out the full blog post over at https://dialect.so/blog/can-you-spot-the-bug-1
Top comments (0)