Spot the bug: This should check if the user is an adult.

Why This Question Matters

We've all been there. You spend two hours staring at a screen, questioning your sanity, only to realize you missed a single character in your code.

The bug in this snippet is a classic "rite of passage" for every JavaScript developer. It deals with the fundamental difference between assignment and comparison. It sounds simple, but because JavaScript is loosely typed and tries to be "helpful" with type coercion, this specific mistake can hide in your codebase for a long time before it actually crashes something.

If you're a junior dev, you might think, "I'd never make that mistake." But when you're tired, rushing a feature, or working in a massive conditional block, it happens to the best of us.

Understanding the Code

Let's look at the snippet again:

const age = 20
if (age = 18) {
  console.log("Adult")
}

At first glance, it looks like it's checking if age is 18. But if you run this, you'll notice something weird: it prints "Adult" even though age is 20.

Here is what's actually happening under the hood:

Inside the if statement, the developer used a single equals sign (=). In JavaScript, a single equals sign is the assignment operator. It doesn't ask "Is this equal to that?" Instead, it says "Make this equal to that."

So, age = 18 isn't a question; it's a command. It tells JavaScript to take the value 18 and assign it to the variable age.

But wait—age was declared with const. In a real environment, this code would actually throw a TypeError: Assignment to constant variable. However, if age had been declared with let or var, the code would execute, change the value of age to 18, and then evaluate the result of that assignment.

Since 18 is a "truthy" value (anything that isn't 0, null, undefined, NaN, or an empty string), the if block evaluates to true and executes the console log.

Finding the Correct Answer

To fix this, we need a comparison operator.

The correct answer is to use === (strict equality). Here is how the fixed code should look:

const age = 20
if (age === 18) {
  console.log("Adult")
}

Why === and not ==?

In JavaScript, == is the abstract equality operator. It performs "type coercion," meaning if the types are different, JS tries to convert them to match before comparing. For example, 18 == "18" is true.

=== is the strict equality operator. It checks both the value and the type. If you're comparing a number to a number, === is faster and much safer because it eliminates the guesswork. In professional production code, you should almost always use ===.

Common Mistakes Developers Make

Aside from the assignment vs. comparison mix-up, there are a few other traps here:

1. The Truthy/Falsy Trap: Beginners often forget that if statements don't need a boolean (true/false). They just need something "truthy." This is why if (age = 18) works—the result of the assignment is 18, and 18 is truthy.
2. Logic Errors: In the original challenge, the goal was to check if the user is an "adult." Checking age === 18 only catches people who are exactly 18. To actually check for adulthood, you'd need age >= 18.
3. Assuming const protects you: While const prevents reassignment, it doesn't stop you from writing logically incorrect code. If you were using a different variable or a property inside an object, the assignment bug would slide right past the compiler and cause a runtime logic error.

Real-World Usage

In a real-world app, this bug is dangerous because it doesn't always cause a crash. It causes silent failures.

Imagine a permission system:

if (user.role = 'admin') { 

  deleteDatabase(); 

}

This is why most modern development teams use Linters (like ESLint). A good linter configuration will flag no-cond-assign, which explicitly warns you when you use an assignment operator inside a conditional statement. If you aren't using a linter yet, start now. It catches these "finger-slip" bugs before they ever hit your PR.

Key Takeaways

- = is for assigning values.
- === is for comparing values (and types).
- Avoid == unless you have a very specific reason to allow type coercion.
- Remember that JavaScript evaluates the result of an assignment as a boolean (truthy/falsy).
- Use a linter to catch these mistakes automatically so you can focus on the actual logic of your app.