Coding Puzzles[EP1]: Late to the Office

The Coding Puzzles Series: an Introduction

Some say that one of the best ways to ideate regular content is not to ideate at all. Rather, one simply ought to document the current issues they face and then extract content from that. Following this train of thought, what better could software development teams make content about than bugs!

Bugs are inevitable, icky, and they make our tests fail. But bugs can also be instructive. We can squeeze out this instructive juice by gamifying once annoying now solved bugs turning them into coding puzzles.

The Coding Puzzle Series is a set of digestible puzzles inspired by bugs, ponderings, and stackoverflow dives we’ve faced at BACIC. We hope to not only share this content because it’s fun and educational (and perhaps cautionary), but also to show a glimpse of the cyber-riddle encounters we’ve had as a team.

The team has had the opportunity to try each of the puzzles that are going to be posted here. And as can be seen from these testimonials, they definitely love it (or at least, love to hate it):

Which console.log gets there first?

Episode 1: Late to the Office

Puzzle Type: Guess the output
Difficulty: Demon*
Instructions: Make an educated guess on what order the following program will log the numbers 0, 1, 2, 3, and 4. Then, run the program to confirm your guess. Scroll to the bottom for a hint.

* In Athennian, we label our bug tickets on a scale that goes from ⏬Wolf, Tiger, Demon, Dragon, and ⏫God. For those who play Dungeon & Dragons, think of it as the creature you randomly encounter.

Check out the code on a repl or work with the following code:

// new promise
const pm = num => new Promise((resolve, reject) => {
  console.log(num)
  resolve(" ")
})
// async function
const someFn = (async() => {
  await console.log(3)
})()
// timeout of 0
setTimeout(() => {
  console.log(2)
}, 0)
// sync code
console.log(4)
// promised function call and then call
pm(0).then(res => {
  console.log(res)
})
// resolve and then call
Promise.resolve().then(() => {
  console.log(1)
})

Takeaways

This puzzle was inspired by our team’s transition from primarily using Promise s into using async functions. We went into a process of refactors, training, and setting conventions that warranted learnings on this topic. This puzzle was a useful tool for lubricating that process.

So why did it log in that order? Try to trace the code while having these takeaways in mind:

1. setTimeout is always interpreted last among instantaneous synchronous code. This is because of Javascript’s event loop. Learn more here.
2. Javascript is a single-threaded language. This means that “async” code is just syntactical sugar for the more familiar callback pattern.
3. The (only) purpose of the async keyword is to allow the use of the await keyword within the scope of the function.
4. await performs a check on whether there is a function that has not yet returned output.
5. await is blocking.*

* despite Javascript being a single-threaded language, the event loop still allows for event listeners, timeouts, and other code to execute.

How did that go?

Loved it? Hated it? Loved to hate it? That’s usually how we feel about ̶j̶a̶v̶a̶s̶c̶r̶i̶p̶t̶ coding puzzles as well.

Stay tuned for more by following BACIC where yours truly,

Elvin Limpin

, will post more like this!

Lastly, as always, feedback is appreciated — we want to make these posts as engaging and informative as possible. Thanks for the read!