The dev trivia question everyone got wrong

Every year I run a tech trivia game for the local tech community. We can bring together multiple meetups from the community together and have a fun end of year event. It's meant to be fun so I aim to have everyone get most of the questions right.

In 2019 I asked this one question that I didn't expect to catch as many people out, it turns out everyone on the night got it wrong. I've shown the question to a lot of developers since then. To this day less than 5 of the developers I've asked have been able to give me an answer to the question.

The Question

When this JavaScript snippet is run what gets logged, and why?

(Why is important because outside of the trivia night anyone can just run it in the console).

const out = () => {
var one = "1"
var two = 2
var three =
one / two
var four = three == true
var five = !!four ===
false ? "true" : false
return
five;
}

console.log(out());

---

Caution spoilers below

The Answer

The answer is
...
...
Are you sure you want to know?
...
...
O.K. The answer is :

undefined

Why

You may have thought that it should be true or specifically the string "true". But you'd be wrong. You'd be wrong because JavaScript is helping out and identifying the end of a statement, effectively automatically adding semi colons. In this case it's adding a semi colon after the return statement and returning undefined.

Why do people get it wrong?

There are a few tricks at play here that make this questions hard.

No semicolons

Lets tackle the obvious one first. The lack of semi colons in the code. If we add semicolons at the end of every statement what's happening becomes a bit more clear.

const out = () => {
var one = "1";
var two = 2;
var three =
one / two;
var four = three == true;
var five = !!four ===
false ? "true" : false;
return;
five;
}

console.log(out());

Terrible formatting

The code has also be formatted in a way to make it confusing as to what is going on. This code looks a lot busier than it is because the statements have been broken over multiple lines and there is not formatting to help tie those statements together and make it legible.
If the formatting is improved it looks like this:

const out = () => {
  var one = "1";
  var two = 2;
  var three = one / two;
  var four = three == true;
  var five = !!four ===
    false ? "true" : false;
  return;
  five;
}

console.log(out());

With those changes (and some syntax highlighting) it becomes more obvious that the code is going to show some unexpected behaviour.

Making your code safe

There are some steps that can be added to a project to help prevent this kind of unexpected behaviour.

Fortunately for us we live in an age of amazing developer tooling that can be added to a project with a few keystrokes.

Use an development environment like Visual Studio Code. This can highlight that five in this example is unreachable code.

Add an automatic code formatter like Prettier. Prettier can be hooked into your code editor and configured to run every time you save a file.

Use a linter like eslint to alert you when there is unreachable code. Linters can also be hooked into your dev environment so you can see issues.

Linters and code formatters can also be hooked into git so that if they're not happy with the code the code can't be committed. For JavaScript projects consider husky and lint-staged.

Use TypeScript. TypeScript is all the rage, and for good reason. If you were to add TypeScript and require type signatures on functions it would be clear that this function was always going to return undefined or TypeScript would throw a compilation error saying that the expected string return value was not getting returned.

Finally, writing unit tests would help to show this code was behaving in an unexpected way. Unit testing is a great way to ensure correctness in your software. It's even better if you write the tests first and follow a TDD (Test Driven Development) workflow.

Trivia 2021

Thanks for reading all the way to the end. If you're around Newcastle NSW Australia or can be on the 15th of December we'll be hosting the 2021 trivia event. RSVP on Meetup https://www.meetup.com/Newcastle-Coders-Group/events/278720624/