Javascript · Booleans
Type coercion
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — What is Type Coercion?
JavaScript has a special feature called type coercion. It means JavaScript can automatically convert one data type to another when needed.
For example, when you try to compare a string with a number, JavaScript will try to convert one of them so the comparison makes sense:
let codemon_level = "25";
let required_level = 20;
console.log(codemon_level);
console.log(required_level);
// JavaScript converts the string to compare them
console.log(codemon_level > required_level); // true - "25" becomes 25
Type coercion can be helpful, but it can also lead to unexpected results if you're not careful! That's why understanding how it works is important.
Exercise 2 — Two Types of Equality: == vs ===
JavaScript has TWO different equality operators, and they behave differently!
-
==
(loose equality) → Compares values AFTER type coercion
-
===
(strict equality) → Compares values WITHOUT type coercion
Let's see the difference with examples involving your Codémon's level:
let level_as_string = "25";
let level_as_number = 25;
console.log("Using ==:");
console.log(level_as_string == level_as_number);
let level_as_string = "25";
let level_as_number = 25;
console.log("Using ===:");
console.log(level_as_string === level_as_number);
With
===
, both the type AND the value must be the same. With
==
, JavaScript converts types first, then compares values.
Which one should you use?
Most developers recommend using === by default because it's more predictable. Use == only when you specifically want type coercion to happen!
Exercise 3 — What will this comparison return?
Look at the following code:
let aquachu_power = "50";
let pyrochu_power = 50;
console.log(aquachu_power == pyrochu_power);
What will be printed to the console?
Options
• ```true```
• ```false```
• ```"50"```
• An error
Hint : Remember: The ```==``` operator performs type coercion. JavaScript will convert the string ```"50"``` to the number ```50``` before comparing.
Exercise 4 — Choose the Right Equality Operator
Complete the code by choosing the correct equality operator (
==
or
===
) for each situation:
let codemon_name = "Aquachu";
let player_choice = "Aquachu";
// We want strict comparison (same type and value)
console.log(codemon_name ____ player_choice);
let level_string = "30";
let level_number = 30;
// We want to allow type coercion here
console.log(level_string ____ level_number);
Options: == === == ===
Hint : Use ```===``` when you want to check both type and value. Use ```==``` when you want JavaScript to convert types before comparing.
Exercise 5 — Surprising Type Coercion Results
Type coercion can produce some surprising results! Let's look at some cases that might catch you off guard:
// true (true becomes 1)
console.log(1 == true);
// true (false becomes 0)
console.log(0 == false);
// false (different types!)
console.log(1 === true);
// true ("" becomes 0)
console.log("" == 0);
// false (different types!)
console.log("" === 0);
// true ("0" becomes 0)
console.log("0" == 0);
// false (string vs number)
console.log("0" === 0);
As a beginner, these results can be confusing. That's why I advise using
===
and
!==
by default to avoid unexpected type coercion.
Exercise 6 — Match Comparisons with Results
Match each comparison expression with its result (
true
or
false
):
Items to match
• "25" == 25
• "25" === 25
• 0 == false
• 0 === false
• "Aquachu" === "Aquachu"
• "" == 0
Definitions
• true
• false
• true
• false
• true
• true
Exercise 7 — Inequality Operators: != vs !==
Just like equality has two versions, inequality also has two operators:
-
!=
(loose inequality) → Checks if values are different AFTER type coercion
-
!==
(strict inequality) → Checks if values are different WITHOUT type coercion
They work exactly like
==
and
===
, but return the opposite result!
Using != (loose inequality):
let hp_string = "100";
let hp_number = 100;
// false (they're equal after coercion)
console.log(hp_string != hp_number);
Using !== (strict inequality):
let hp_string = "100";
let hp_number = 100;
// true (different types!)
console.log(hp_string !== hp_number);
let codemon1 = "Aquachu";
let codemon2 = "Pyrochu";
// true (different values)
console.log(codemon1 !== codemon2);
Remember:
!==
is the strict version (recommended), while
!=
allows type coercion.
Exercise 8 — Using Inequality Operators
Complete the code by choosing the correct inequality operator (
!=
or
!==
):
let selected_codemon = "Florachu";
let opponent_codemon = "Pyrochu";
// Check if they're different (strict comparison)
console.log(selected_codemon ____ opponent_codemon);
let user_input = "50";
let stored_level = 50;
// Check if different, allowing type coercion
console.log(user_input ____ stored_level);
Options: != !== != !==
Hint : Use ```!==``` for strict comparison (different type OR value). Use ```!=``` when you want to allow type coercion before checking if values are different.
Exercise 9 — Best Practice: Which Operator?
You're writing code to check if a player's Codémon level matches the requirement for entering a tournament. The level is stored as a number, and you want to make sure the comparison is safe and predictable.
let codemon_level = 30;
let required_level = 30;
Which comparison should you use as a general best practice?
Options
• ```codemon_level == required_level```
• ```codemon_level === required_level```
• Both are equally good
• It doesn't matter
Hint : Think about which operator is more predictable and prevents unexpected type conversions.
Exercise 10 — Experiment with Equality!
Time to experiment! Below are several comparisons. Before running the code, try to predict what each comparison will return (
true
or
false
).
Then run the code to see if you were right. Don't worry if you get some wrong - that's how we learn!
// Predict the results before running!
// STRING vs NUMBER
console.log("10" == 10); // Predict: ?
console.log("10" === 10); // Predict: ?
console.log("10" != 10); // Predict: ?
console.log("10" !== 10); // Predict: ?
// BOOLEAN COERCION
console.log(1 == true); // Predict: ?
console.log(1 === true); // Predict: ?
console.log(0 == false); // Predict: ?
console.log(0 === false); // Predict: ?
// EMPTY STRING
console.log("" == 0); // Predict: ?
console.log("" === 0); // Predict: ?