Destructuring Tweets - Episode 11 - Continue to Break
Tags: snippet, javascript, destructuring, loops
Published: 2021-03-21 16:29:56

---
title: Destructuring Tweets - Episode 11 - Continue to Break
published: true
description: I pick a more or less random snippet from Twitter and analyze it in depth in this series. It shall help me, and you understand the trickery behind it. In this episode, an illusion will teach us the key-words break and continue.
tags: snippet, javascript, destructuring, loops
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e77hkhk91dl7xhfb9vow.png
---

What up, homeslice? Glad you found this blog series about JavaScript Twitter quizzes! This week is a funny snippet around the loop-manipulating key-words `break` and `continue`. Get ready for some serious trickery!

# Snippet of the Week

This week's [snippet](https://twitter.com/FullstackPath/status/1371026592378540032) is from [fullstack_learning_path](https://twitter.com/FullstackPath):
```javascript
for (var i = 1; i < 10; ++i) {
  if (i % 3) {
    continue;
  }
  if (i == 7) {
    break;
  }
  console.log(i);
}
```
The snippet features a for-loop initializing the variable `i` with 1. Said gets incremented by 1 until it's 9 (`< 10`). To put it simply: we count from 1 to 9.
In the loop, there are two checks before printing the current index to the console — the first tests whether modulo 3 returns a truthy value, which means everything except 0. In that case, `continue` gets executed.
If not, the snippet further validates whether the current index holds 7. In case it does, `break` is executed.

# The Output

Okay, that one is a bit of a brain-fuck. On first thought, you might conclude it'll log 3 and 6. Since the loop breaks on 7, right? However, it will still also print 3, 6, and 9! All three of the values having no remainder when divided by 3 (`% 3`). In case you are still or even more confused, worry not and jump right to the next chapter.

# The Analysis

So, we already figured the loop is counting from 1 to 9. Let's focus on the first check, `i % 3`.  It will always be true if it does not result in `0`. In case the index can be divided by three without having a remainder, the expression is false. It's true for 1, 2, 4, 5, 7, 8 in this context, to be even more exact.
Let's examine what happens then: `continue` is called. This key-word tells the loop to skip the rest of its body and move to the next iteration. Meaning the `console.log` at the bottom is never reached. Or the other way around, only 3, 6, and 9 are logged.
Now let's focus on the second if-statement. In case the index holds the value 7, the loop breaks. `break` is a key-word telling the loop to stop with everything. It skips the rest of its body and will not iterate further, continuing with whatever is next in the sequence.
That's why this snippet is so funny. It tricks you into believing 9 will not print since it stops after `i` reached 7. Well, as we know, this is not the case. And by now, you probably already figured also why. The second statement is, just as `console.log(i)`, only reached by 3, 6, and 9. These numbers are not 7 🤯, thus making the body of the second if-statement unreachable code! `break` is never executed.

# Snippet Summary

- **Trickery**: creating logically unreachable-code
- **Key Learning**: what `continue` and `break` does
- **Further Reading**:
    - [break](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break)
    - [continue](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue)
    - [Remainder Operator (%)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder)