“Ich liebe #Javascript…”

I came across the following tweet the other day…


In it was an image containing a number of little JavaScript quirks I had yet to address but planned to in my next post… But things like renovating a new house and looking after my son have kinda taken a higher priority… But you know what, there’s no time like the present…

So, let’s take a closer look at the image posted by @nodenow:

We’ll address these one by one, and I’ll explain them all…

  1. ‘5’ – 3 (result: 2)
    Why does subtracting a number from a string of a number result in a number? The  operator does one thing and one thing only in between operands like this, it subtracts. When you have a subtraction happening both operands will be coerced into numbers. The 3 already is a number, but the ‘5’ gets coerced to its numeric equivalent, 5. 5 minus 3 results in 2, our answer.
  2. ‘5’ + 3 (result: “53”)
    To those believing that the + here behaves in the same way as the in the previous example, it could not be further from the truth. Because at least one of the operands is a string, the + is automatically converted from its regular function of adding two numbers together, and now becomes a concatenation operator. In fact, as a rule if there are two operands surrounding a +, if at least one of those operands is a string, the + is no longer a simple addition operator, but it will always become a concatenation operator. As a result, both operands will be converted to strings. ‘5’ stays as it already is, and the 3 will be converted to ‘3’. So as a result, adding ‘5’ to 3, results in the concatenation of ‘5’ and ‘3’ which ends up as ’53’.
  3. ‘5’ – ‘4’ (result: 1)
    Similar to our first example, the is a subtraction operator, always. So as a result the two strings will be coerced into their numeric equivalents of 5 and 4, and then the subtraction will occur after that. 5 minus 4 is, of course, 1, our final result.
  4. ‘5’ + + ‘5’ (result: ’55’)
    Bear in mind that the space in between the two plus signs is intentional… Removing the space will result in a Syntax Error due to the introduction of the increment operator (++) on an invalid increment operand. So what’s going on here? Here we have two similar but very different operators at work… the + before the second ‘5’ acts as a unary operator, which converts that second ‘5’ to a numeric 5, which results in ‘5’ + + ‘5’ really being ‘5’ + (+’5′), which is then converted to ‘5’ + 5, which is similar to our second example. So we apply similar behavior to our current example, ‘5’ + 5 converts the numeric 5 to its string equivalent of ‘5’, which means ‘5’ + + ‘5’ becomes ‘5’ + 5, which in turn becomes ‘5’ + ‘5’, which is a concatenation, which results in ’55’. Bear in mind, that a unary operator has a higher priority than a concatenation operator, and so unary operators will always be resolved first.
  5. ‘foo’ + + ‘bar’ (result: ‘fooNaN’)
    So we weren’t satisfied enough to just do it with numbers, we decided to throw foo and bar into the mix! The logic is the same as the previous example, but with slightly different results. the unary operator before the ‘bar’ string tries to convert it to a number, but without success, and so it reports back as Not a Number, a.k.a., our old buddy NaN. Add NaN to any string, and it will kick into concatenation mode, converting the paradoxical number NaN into ‘NaN’, which allows ‘foo’ to concatenate with it, forming ‘fooNaN’.
  6. ‘5’ + – ‘2’ (result: ‘5-2’)
    Another case of concatenation and other operators. In this case, we have a concatenation operator and a negation operator. Like the unary operator, it will take higher priority than the concatenation operator and thus will be resolved first. So ‘5’ + – ‘2’ will be interpreted as ‘5’ + (-‘2’), which in turn gets interpreted as ‘5’ + (-2). A string and a number with a plus sign in between will always be interpreted as a concatenation operator and thus the -2 will be converted to ‘-2’. So in the end we have ‘5’ + ‘-2’ which gets evaluated to ‘5-2’, our final result.
  7. ‘5’ + – + – – + – – + + – + – + – + – – – ‘2’ (result: ‘5-2’)
    Before I go explaining this one, a quick message to the person who originally created this image and chose this particular piece of code to demonstrate the quirks of JavaScript, whomever they are…I hate you…Now then… This particular question’s solution is based solely on the fact that the + and operators, whether we’re talking about addition, unary or concatenation or negation or subtraction, that all five of these types of operators are evaluated from right to left. This in mind, the last operator is a + near a string, so a concatenation operator. Lucky us! We know the answer is going to be a string of some sort!So, let’s go from right to left, solving it as we go:

    ‘5’ + – + – – + – – + + – + – + – + – – – ‘2’ (Our original statement)

    ‘5’ + – + – – + – – + + – + – + – + – – -2 (The last next to the 2 coerces our string to a number and at the same time negates it)

    Now comes the fun part. We now start consolidating operators using the following rules:

    • – -2 becomes +2;
    • – +2 becomes -2;
    • + -2 becomes -2;
    • + +2 becomes +2;

    So from:

    ‘5’ + – + – – + – – + + – + – + – + – – -2

    we get the following sequence of reduction:

    • ‘5’ + – + – – + – – + + – + – + – + – – -2
    • ‘5’ + – + – – + – – + + – + – + – + – +2
    • ‘5’ + – + – – + – – + + – + – + – + -2
    • ‘5’ + – + – – + – – + + – + – + – -2
    • ‘5’ + – + – – + – – + + – + – + +2
    • ‘5’ + – + – – + – – + + – + – +2
    • ‘5’ + – + – – + – – + + – + -2
    • ‘5’ + – + – – + – – + + – -2
    • ‘5’ + – + – – + – – + + +2
    • ‘5’ + – + – – + – – + +2
    • ‘5’ + – + – – + – – +2
    • ‘5’ + – + – – + – -2
    • ‘5’ + – + – – + +2
    • ‘5’ + – + – – +2
    • ‘5’ + – + – -2
    • ‘5’ + – + +2
    • ‘5’ + – +2
    • ‘5’ + -2

    So what happens? As I mentioned in the previous example, a string and a number with a plus sign in between will always be interpreted as a concatenation operator and thus the -2 will be converted to ‘-2’. So in the end we have ‘5’ + ‘-2’ which gets evaluated to ‘5-2’, our final result.

  8. x = 3; ‘5’ + x – x; ‘5’ – x + x; (results: 50 and 5)
    Our previous example only had two operands, and in both of these statements we have three. As a result, everything with three or more operands needs to be evaluated left-to-right. So in the first part:

    ‘5’ + x – x
    , which substituting using x = 3 we get: ‘5’ + 3 – 3

    We have ‘5’ concatenating to a number, forming the string ’53’; and then subtracting 3, forcing ’53’ to be converted to a number, 53, before subtracting 3, making 50.

    Our second statement evaluates as, ‘5’ – 3 + 3, where the ‘5’ is coerced by the subtraction operator to become 5, before subtracting 3, making 2, and then the addition operator adds 3 back again to make 5.

So there you go… Completely explained… If you have any questions, please feel free to ask by dropping a comment or two below!