🔄 Type Coercion in JavaScript

20 Essential Questions with Live Demos

Category 1: String Coercion (Questions 1-4)

Q1: String Concatenation with +

5 + "5" =
Answer: When the + operator is used with a string, JavaScript coerces the number to a string and performs concatenation. Result: "55"

Q2: Multiple Operations

1 + 2 + "3" =
"1" + 2 + 3 =
Answer: Operations evaluate left-to-right. First: (1+2)=3, then 3+"3"="33". Second: "1"+2="12", then "12"+3="123"

Q3: Template Literals

`Result is ${5 + 5}` =
Answer: Template literals automatically convert expressions to strings.

Q4: Empty String Trick

"" + 123 + true =
Answer: Empty string forces everything to be concatenated as strings. Result: "123true"

Category 2: Numeric Coercion (Questions 5-8)

Q5: Subtraction with Strings

"10" - 5 =
Answer: Subtraction only works with numbers, so "10" is coerced to 10. Result: 5

Q6: Multiplication and Division

"5" * "2" =
"20" / "4" =
Answer: Both strings are converted to numbers. Results: 10 and 5

Q7: Unary Plus Operator

+"42" =
+true =
+false =
Answer: Unary + converts its operand to a number. Results: 42, 1, 0

Q8: Modulo Operation

"10" % "3" =
Answer: Modulo operator converts strings to numbers. Result: 1

Category 3: Boolean Coercion (Questions 9-12)

Q9: Boolean Arithmetic

true + true =
true + false =
false * 100 =
Answer: In numeric context, true = 1 and false = 0. Results: 2, 1, 0

Q10: Double NOT Operator

!!"hello" =
!!0 =
!!"" =
Answer: !! converts any value to its boolean equivalent. Results: true, false, false

Q11: Logical AND (&&)

5 && "hello" =
0 && "hello" =
Answer: && returns the first falsy value or the last value if all are truthy. Results: "hello", 0

Q12: Logical OR (||)

null || "default" =
"value" || "default" =
Answer: || returns the first truthy value or the last value if all are falsy. Results: "default", "value"

Category 4: Comparisons (Questions 13-16)

Q13: Loose vs Strict Equality

5 == "5" =
5 === "5" =
Answer: == performs type coercion (true), === checks type and value without coercion (false)

Q14: Null and Undefined

null == undefined =
null === undefined =
Answer: null and undefined are loosely equal but not strictly equal. Results: true, false

Q15: Boolean Equality

true == 1 =
false == 0 =
true === 1 =
Answer: With ==, booleans coerce to numbers (true=1, false=0). Results: true, true, false

Q16: NaN Comparison

NaN == NaN =
NaN === NaN =
Object.is(NaN, NaN) =
Answer: NaN is not equal to itself! Use Object.is() or isNaN() to check. Results: false, false, true

Category 5: Arrays & Objects (Questions 17-18)

Q17: Array Coercion

[1, 2] + [3, 4] =
[1] + 2 =
+[] =
Answer: Arrays convert to strings via toString(). [1,2] becomes "1,2". Results: "1,23,4", "12", 0

Q18: Object Addition

[] + {} =
({}) + [] =
Answer: Both convert to strings. [] becomes "", {} becomes "[object Object]"

Category 6: Tricky Cases (Questions 19-20)

Q19: Double Negative

"5" - - "2" =
"10" - - - "5" =
Answer: Unary minus converts to number. "5" - (-"2") = "5" - (-2) = 5 - (-2) = 7. Second: 10 - (-(-5)) = 10 - 5 = 5

Q20: Bizarre Equality

[] == ![] =
"" == 0 =
"0" == false =
Answer: ![] is false→0, [] becomes ""→0, so 0==0. "" coerces to 0. "0" and false both become 0. All true!

Quick Reference: Falsy Values

Value Type To Number To String To Boolean
falseBoolean0"false"false
0Number0"0"false
-0Number-0"0"false
0nBigIntTypeError"0"false
""String0""false
nullObject0"null"false
undefinedUndefinedNaN"undefined"false
NaNNumberNaN"NaN"false