Thread by @swapnakpanda

While "2" - 2 = 0, why is "2" + 2 = "22"?

A JavaScript 🧵

➊ '+' operator is overloaded for Strings

❑ The binary '+' operator is generally a "Number Addition" operator.

❒ When one of the operand is string, '+' rather acts like a "String Concatenation" operator. The other operand if not string is converted to string first.

➋ '-' operator operates on numbers only

❑ The binary "-" operator is known as a "Number Subtraction" operator.

❒ If any of the operand is not number, that is first converted to a number before evaluating the expression.

➌ "2" + 2

⬒ Here, first operand is string while the other one is number.

⬔ As one operand is string, it's a "String Concatenation" operator.

⬓ 2nd operand is converted to string first. So 2 becomes "2".

⬕ Expression is now "2" + "2".

Result: "22"

➍ "2" - 2

⬒ Here, first operand is string while the other one is number.

⬔ Because "-" acts on numbers only, the 1st operand is first converted to a number. So "2" becomes 2.

⬓ Expression is now 2 - 2.

Result: 0

➎ Let's evaluate: "2" + 2 - "2"

"+" and "-" are of same precedence. Hence are evaluated from left to right.

"2" + 2 - "2"
⇩
"2" + "2" - "2"
⇩
"22" - "2"
⇩
22 - 2
⇩
20

➏ Finally

❑ Unlike many other languages, JavaScript is not strict about data type of operands.

❒ When operand is of different data type, instead of throwing error it auto converts them to required type.

Here, we come to the end of this 🧵 which covered one of the most basic yet confusing concept.

If you don't want to miss such tutorial threads on HTML, CSS and, JavaScript, follow {@swapnakpanda}

Till we meet again, stay safe and stay sanitised. 👋