The dev trivia question everyone got wrong
Tags: javascript, trivia
Published: 2021-11-06 03:41:53

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). 

```text
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
![A snake head looking right in a long wide image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opiaoxrl5w5u011jrga9.png)
---

## The Answer

The answer is 
...
...
Are you sure you want to know?
...
...
O.K. The answer is : 
```javascript
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. 

```javascript
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:

```javascript
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](https://code.visualstudio.com/). This can highlight that `five` in this example is unreachable code. 

Add an automatic code formatter like [Prettier](https://prettier.io/). Prettier can be hooked into your code editor and configured to run every time you save a file.

Use a linter like [eslint](https://eslint.org/) 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](https://www.npmjs.com/package/husky) and [lint-staged](https://www.npmjs.com/package/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/