Operations on Primitives

In many programming languages, adding a number to a string results in an error. In JavaScript, it results in a feature (or a bug, depending on who you ask).

1. The Chameleon Operator: Addition (+)

The + operator is unique in JavaScript because it serves two distinct purposes:

  1. Mathematical Addition (for numbers).

  2. String Concatenation (for strings).

The Rule: If any operand is a string, JavaScript converts the other operand to a string and concatenates them. String conversion takes priority.

| Operation | Result | Explanation |

| 10 + 5 | 15 | Both are numbers. Math happens. |

| "10" + "5" | "105" | Both are strings. Concatenation happens. |

| 10 + "5" | "105" | Coercion: 10 becomes "10", then joins "5". |

| "Hello" + 5 | "Hello5" | Number converts to string. |

| 5 + 5 + "5" | "105" | Left-to-right: 5+5 = 10, then 10+"5" = "105". |

| "5" + 5 + 5 | "555" | Left-to-right: "5"+5 = "55", then "55"+5 = "555". |

2. The Pure Math Operators (-, *, /, %)

Unlike +, these operators exist only for mathematics.

The Rule: JavaScript tries to convert everything to a Number. If it can't, the result is NaN (Not a Number).

| Operation | Result | Explanation |

| "10" - 5 | 5 | Coercion: String "10" becomes Number 10. |

| "10" * "2" | 20 | Both strings are converted to numbers. |

| "10" / 2 | 5 | String becomes number. |

| "Hello" - 2 | NaN | "Hello" cannot become a number. |

Key Takeaway: This is why 10 + "10" is "1010", but 10 - "10" is 0.

3. Comparison Operators (<, >, <=, >=)

Comparisons can get tricky when types don't match.

A. Number vs. String (Numeric Context)

If you compare a number to a string, JS converts the string to a number.

B. String vs. String (Lexicographical Context)

If both sides are strings, JS compares them alphabetically (dictionary order, character by character code). This causes bugs.

Why? In a dictionary, "1" comes before "2". It doesn't matter that 10 is mathematically larger; JS only checks the first character.

4. Equality Operators (== vs ===)

This is the most critical distinction in JavaScript logic.

Abstract Equality (==)

Allows type conversion. JS tries to find a common type before comparing.

  • 5 == "5"true (String "5" becomes Number 5).

  • true == 1true (true becomes 1).

  • null == undefinedtrue (Special rule: they are "equal" to each other but nothing else).

Strict Equality (===)

No conversion allowed. Types must match.

  • 5 === "5"false (Different types).

  • true === 1false.

  • null === undefinedfalse.

Best Practice: Always use ===.

5. The Odd Couple: null and undefined in Math

While they seem similar, null and undefined behave very differently when forced into mathematical operations.

Null (The "0" Placeholder)

null converts to 0 in numeric contexts.

Undefined (The "Not Existing")

undefined converts to NaN in numeric contexts.

6. Summary Cheat Sheet

| Operator | Scenario | Behavior | Result Example |

| + | String + Number | Concatenation (String wins) | "5" + 2"52" |

| - * / | String - Number | Math (Number wins) | "5" - 23 |

| > < | String vs String | Dictionary Order | "10" < "2"true |

| == | Mixed Types | Converts to Number usually | 0 == falsetrue |

| === | Mixed Types | Returns false immediately | 0 === falsefalse |

Last updated