We've all come across numerous memes highlighting the eccentricities of JavaScript. Many fellow bootcamp attendees I've met are firmly convinced that JavaScript possesses a mind of its own, seemingly determined to avoid throwing any errors. Join me as we explore the amusing quirks and peculiarities that make JavaScript the enigmatic language it is.
1.Why is '11'+1='111'
To unravel these mysteries, let's take a deep dive into the ECMAScript documentation.Below is the ecmascript documentation for '+' operator
12.8.3.1Runtime Semantics: Evaluation
AdditiveExpression:AdditiveExpression+MultiplicativeExpression
Let lref be the result of evaluating AdditiveExpression.
Let lval be ? GetValue(lref).
Let rref be the result of evaluating MultiplicativeExpression.
Let rval be ? GetValue(rref).
Let lprim be ? ToPrimitive(lval).
Let rprim be ? ToPrimitive(rval).
If Type(lprim) is String or Type(rprim) is String, then
Let lstr be ? ToString(lprim).
Let rstr be ? ToString(rprim).
Return the string-concatenation of lstr and rstr.
Let lnum be ? ToNumber(lprim).
Let rnum be ? ToNumber(rprim).
Return the result of applying the addition operation to lnum and rnum. See the Note below 12.8.5.
In the ECMAScript documentation, the behavior of the + operator involves several abstract operations such as ToNumber(), ToString(), ToPrimitive(), and GetValue().While these abstract operations may not be directly utilized by programmers in their day-to-day coding, they serve as the behind-the-scenes mechanisms that enable the consistent and predictable behavior of JavaScript.
If Type(lprim) is String or Type(rprim) is String, then
Let lstr be ? ToString(lprim).
Let rstr be ? ToString(rprim).
Return the string-concatenation of lstr and rstr.
In the context of the + operator in JavaScript, when either the left or right variable is a string, the ToString() method is invoked on both variables. This process ensures that both operands are converted to strings before the concatenation operation takes place.
Let us breakdown '11'+1
The left operand is the string '11'.
The right operand is the number 1.
Since the left operand is a string and the right operand a number ToString() method is called upon both the operands
ToString('11'): Since the operand is already a string no conversion is needed.ToString(1): The right operand is a number, so it is converted into String.
Now, the expression becomes 11 - 1, resulting in 10.
2.Let's now look at why '11'-1=10
This is Ecmascript definition for the subtraction operator
12.8.4The Subtraction Operator ( - )
12.8.4.1Runtime Semantics: Evaluation
AdditiveExpression:AdditiveExpression-MultiplicativeExpression
Let lref be the result of evaluating AdditiveExpression.
Let lval be ? GetValue(lref).
Let rref be the result of evaluating MultiplicativeExpression.
Let rval be ? GetValue(rref).
Let lnum be ? ToNumber(lval).
Let rnum be ? ToNumber(rval).
Return the result of applying the subtraction operation to lnum and rnum. See the note below 12.8.5.
As observed earlier, when dealing with the subtraction operator in JavaScript, the abstract function ToNumber() is called upon both operands. This process ensures that both operands are converted to numeric values before the subtraction operation takes place.
Subtraction Operation: '11' - 1
Let's break down the expression '11' - 1:
The left operand is the string '11'.
The right operand is the number 1.
Since the subtraction operator involves numeric operations, both operands need to be converted to numbers. Therefore, ToNumber() is applied to both '11' and 1.
ToNumber('11'): Converts the string '11' to the numeric value 11.ToNumber(1): The right operand is already a number, so no conversion is needed.
Now, the expression becomes 11 - 1, resulting in 10.
Hence, '11' - 1 equals 10. The abstract operation ToNumber() ensures consistent and predictable behavior, even when dealing with mixed data types in arithmetic expressions.
I will write more articles about Coercion and other javascript behaviors in the future.