Blog /
Geekery /
Javascript: the weird parts

Javascript: the weird parts

Written by Charlie on 2014-08-29

Javascript. Love it or hate it it seems to have become the defacto virtual machine of the internet that Java was supposed to be. And it is odd. Like properly odd. This is a short collection of some weird things that I have noticed about it.

JavaScript: the weird parts

I keep a little list of these by my desk for my own sick amusement (which is something that my pal oxguin reckons is not a fact to be shared out loud). If you like this little lot, then you would probably enjoy some of the prior art at wtfjs.

Comparison craziness

Let’s start by making x an array with 0 in it.js> x=[0] [0]It should equal itself, which is good.js> x==x trueBut it also equals not itself, which is not so good.js> x==!x trueWhat about comparing a 3 element array and a string?js> Array(3)==",," trueRi-iight.

Type twattery

The type of not a number is, well, a number. Sensible.js> typeof NaN "number"Well at least that means it ought to be equal to itself, right?js> NaN==NaN falseSo much for NaN. I wonder what the type of null is …js> typeof null "object"… but of course it is not actually an instanceof Object js>null instanceof Object falseSo, what is a string then?js> "string" instanceof String falseUh-huh.

Bounds buffoonery

How about a really big number first of all. Wait. What?js> 9999999999999999 10000000000000000Hopefully small numbers make more sense.js> 0.1+0.2==0.3 falseI guess not. I bet that max is still bigger than min though.js> Math.max()>Math.min() false js> Math.max()<Math.min() trueMaybe not.

Array assinity

Calling + on an empty array and an empty array gives the empty string. Who knew?js> []+[] ""How about an empty array and an empty object?js> []+{} "[object Object]"An empty object and an empty array gives, ummm, 0.js> {}+[] 0Whereas an empty object and an empty object is not a number. Which is true, I suppose.js> {}+{} NaN

Boolean balderdash

I’ve heard of that boolean arithmetic. Let’s give it a try.js> true+true===2 true js> true-true===0 trueAh. It looks like true is equal to one. I’ll just check.js>true===1 falseDoh!

And one for luck

See if you can work out what this will evaluate tojs> (!+[]+[]+![]).length

Wow! Thanks for reading this far. Got any favourite weird parts of Javascript? Share them in the comments.

Incidentally, these were all evaluated on spidermonkey 24.2.0. Maybe they won’t work in node/whatever other js engine you are using…

Comments

Be respectful. You may want to read the comment guidelines before posting.
You can use Markdown syntax to format your comments. You can only use level 5 and 6 headings.
You can add class="your language" to code blocks to help highlight.js highlight them correctly.

Privacy note: This form will forward your IP address, user agent and referrer to the Akismet, StopForumSpam and Botscout spam filtering services. I don’t log these details. Those services will. I do log everything you type into the form. Full privacy statement.

jremmen

![] === false
!+[] === true
[]+[] === ""
![]+[] === "false"
!+[]+[] === "true"
!+[]+[]+![] === "truefalse"
"truefalse".length === 9

2014-08-30

#564

stone

var arrayMap = [1];
arrayMap["stuff"] = "hi";
arrayMap["moreStuff"] = "there";
arrayMap.length == 1;  // is true
arrayMap["stuff"] == "hi";// is true
arrayMap.toString(); // "1"

2014-08-30

#565

lolkittens

This is a lot of normal behavior that people don't understand.
```
js> Array(3)==",,"
true
```
That is fully expected, you are comparing the value of an array which would be represented as [",,"] so without checking the types, this is exactly what you should get. ex.
```
js>Array(3)===",,"
false
```
------------------

The issue with something like
```
js> 9999999999999999
10000000000000000
```
is that the largest exact number available is 9007199254740992 due to the fact that javascript uses double-precision floating-point numbers. http://ecma262-5.com/ELS5_HTML.htm#Section_8.5
------------------

Now, there is a perfectly valid reason why this is an expected result:
```
js> 0.1+0.2==0.3
false
```
The issue is that the first subject of addition isn't actually just 0.1, it's actually
0.100000000000000005551 same with 0.2, it's actually value is 0.200000000000000011102 if you execute 0.1 it will say 0.1 due to the fact that javascript has a default precision size to show you which is the length of your input OR 1 if it's over 18.

If you execute 0.10000000000000006 it will return 0.10000000000000006 however if you execute 0.100000000000000006 (one more precision) it will return 0.1

Now, here is what is actually happening
```
js> (0.1).toPrecision(21)
0.100000000000000005551
js> (0.2).toPrecision(21)
0.200000000000000011102
js> (0.1+0.2).toPrecision(21)
0.300000000000000044409
```
Now that makes more sense, it was just hidden by the way JS chooses to show numbers. Python suffers from the same situation.

So in conclusion 0.1+0.2 is not equal to 0.3, it's equal to 0.300000000000000044409
```
js> 0.1+0.2 == 0.300000000000000044409
true
```
------------------
From a high level I see why the following example is the case
```
js> Math.max()>Math.min() 
false
js> Math.max() ['hello'] + [' '] + ['world']
'hello world'
```
So []+[] returning a string is normal, but what about when you check the typeof []+[] ...?
```
js> typeof []+[]
'object'
```
welp, that's sure not a string BUT, what about when you assign []+[] to a variable and
url:Javascript: the weird parts

2014-08-30
#566

lolkittens

Comment 566
check it's type...(the fact I wrote this means it's not what you would guess)
```
js> var a = []+[]
undefined
js> typeof a
'string'
```
that's a little odd to me.
------------------
Back to my argument that a lot of this behavior is normal js> []+{} "[object Object]"

that is really misleading, remember when I said array plus something is merging strings? > ['hi']+{} 'hi[object Object]'

what your example has actually done is printed the string notation for an object and put an empty string in front of it. That's totally normal/expected behavior.
------------------

With this next one, it is odd but it is still expected behavior
```
js> true+true===2
true
js> true-true===0 
true
```
this isn't that surprising because you are forgetting something really important, boolean + boolean will be coerced into an int to fit your strict need for addition.
```
js> true+true
2
js> false+true
1
```
Therefore if you compare the results it will not only equal the number 2 but also be a number itself!
```
js>true+true === 1+1
true
```
I hope this helps everyone understand these oddities that aren't specific to just javascript.
url:Javascript: the weird parts

2014-08-30
#567

TML

Comment 567
@ lolkittens -
```
typeof []+[] === "object"
```
because
```
typeof [] === "object"
```
and
```
"object" + [] === "object"
```
; what you probably wanted to be evaluating is
```
typeof([]+[])
```
, which most definitely IS "string"; in other words, the keyword
```
typeof
```
has higher precedence than
```
+
```
, so you were evaluating
```
(typeof [])+[]
```
.
url:Javascript: the weird parts

2014-08-30
#568

Anon

Comment 568
```
Math.max()>Math.min() === false
```
makes sense if you're aware of the defined behaviour for these functions:
```
Math.min()...If no arguments are given, the result is Infinity.
```
```
Math.max()...If no arguments are given, the result is - Infinity.
```
Now, as to why those were the decisions they made, your guess is as good as mine - but I guess they're just as reasonable as any other decision for when you ask for the max or min of an undefined value.
url:Javascript: the weird parts

2014-08-30
#569

charlie

Thanks for contributions and explanations
Thanks for all the comments folks and particularly those of you who've taken the time to explain why js is behaving the way it is. To be honest, I just thought this stuff was amusing, I'm enjoying watching the discussion unfold here and onreddit.

Here's a fun one that I didn't put in:
```
js> 3>2>1
false
```
I would expect it to think I meant
```
3>(2>1)
```
and 3 is greater than true if squint at it right. However, it actually evaluates to
```
js> (3>2)>1
false
```
which means
```
js> true>1 

false
```
url:Javascript: the weird parts

2014-08-30
#571

lolkittens

Comment 571

Gary Bernhardt has an amusing screencast about the topic if that's what your looking for. https://www.destroyallsoftware.com/talks/wat

url:Javascript: the weird parts

2014-08-30
#572

Charlie

Comment 572

Thanks for sharing the screencast lolkittens I was LOLing in recognition :-) Thanks also for your technical explanations. Good stuff...

url:Javascript: the weird parts

2014-08-30
#573

allthetime

Comment 573
Some insight as to why Math.min() > Math.max()
```
> Math.max()
-Infinity
> Math.min()
Infinity
```
...wtf?
url:Javascript: the weird parts

2014-08-31
#574

Charlie

Infinity and identity
hey allthetime, Anon,...wtf? -- allthetimeNow, as to why those were the decisions they made, your guess is as good as mine - but I guess they're just as reasonable as any other decision for when you ask for the max or min of an undefined value. -- Anon It's actually more sensible than you might think. It is because Math.min() and Math.max() can be used as functions over an array. Think of it as being a bit like the sum and product functions (I implement these in a later comment). If you've ever done any group theory the following should be familiar.

If you call sum on an empty collection, you'd expect it to return 0, which is the "identity" for + or "additive identity". That is
```
a + 0 == a and 0 + a == a
```
If you call product on an empty collection you want it to return 1, which is the "multiplicative" identity. That didn't seem obvious until I thought about it like this
```
a * 1 == 1 and 1 * a == a
```
In the same way you want max to return an identity function for "max-ness" so that
```
max a ? == a and max ? a == a
```
I find it easier to compare with + and * if I shift the max to the middle thus
```
a max ? == a and ? max a == a
```
In order for this to always be true, max() has to return something guaranteed to be smaller than any other number — hence negative Infinity (aka -∞, ⧞ or -Infinity). -∞ is the identity of max in the same way that 0 is the identity of + or 1 the identity of *.

So now we have
```
a max -∞ == a and -∞ max a == a
```
In the same way the identity for min has to be bigger than any other number so we get
```
a min ∞ == a and ∞ min a == a
```
Continued in next comment…
url:Javascript: the weird parts

2014-09-01
#575

Charlie

Infinity and identity #2

…continued from previous post.

I realized that js doesn't actually have sum or product fuctions, so let's build them and then show how we could implement min or max in a functional style. Here are the sum and product callbacks, which we will need shortly.js> sum = function(total, num){ return total + num } (function (total, num){ return total + num }) js> product = function(total, num){ return total * num } (function (total, num){ return total * num }) With these, an identity, and the js Array.reduce function we can now sum or product an array. We will also check they are right by comparing with writing them out longhand.js> [1,3,5,7].reduce(sum,0) 16 js> [1,3,5,7].reduce(sum,0) == 1+3+5+7 true We can verify that all sorts of trouble ensues if we give the wrong identity to our reducesjs> [1,3,5,7].reduce(sum,1) == 1+3+5+7 false js> [1,3,5,7].reduce(sum,1) 17 js> [1,3,5,7].reduce(product,0) == 1*3*5*7 false js> [1,3,5,7].reduce(product,0) 0 Let's do the same thing with max and check it works as expectedjs> max = function(total, num){ return total>=num ? total : num} (function (total, num){ return total>=num ? total : num}) js> [1,3,5,7].reduce(max,‐Infinity) 7 Now what would happen if the identity were Infinity?js> [1,3,5,7].reduce(max,Infinity) Infinity So there you have it. Not entirely crazy after all ;-)

url:Javascript: the weird parts

2014-09-01
#577

Anon

Comment 577

(!+[]+[]+![]).length = 9

because: "truefalse".length = 9

So where does "truefalse" come from?

+[] = 0 !0 = true true+[] = "true" ![] = false "true"+false = "truefalse"

Yeah, it's crazy, but if you're mixing types and doing this sort of crazy thing you deserve every headache you get.

url:Javascript: the weird parts

2014-09-01
#580

Radomír Žemlička

Comment 580

Comparison craziness Yeah, because you don't know the difference between equality (==) and strict equality (===) operators, right?

The type of not a number is, well, a number. Sensible. It's a subtype of number.

Well at least that means it ought to be equal to itself, right? Yeah, I agree this is weird, but it's just intended and specified like this in the ECMA specification.

So, what is a string then? String is a primitive type, it's not an object. So the instanceof operator can't be used.

How about a really big number first of all. Wait. What? Hopefully small numbers make more sense. It's a standard float number specified by IEEE 754. You can't expect it will handle so huge numbers. It can't also be precise when counting with decimal numbers, because some of then can't be expressed using the binary system.

I guess not. I bet that max is still bigger than min though. Maximal and minimal numbers can be accessed using the Number.MIN_VALUE and Number.MAX_VALUE. These function return minimal and maximal numbers of the given numbers (using arguments). So for example Math.min(1, 2) gives 1. The algorithm is also using the Infinity number as a maximum value for comparing. That's why Math.min() without arguments return Inifinity. It's its initial value.

Calling + on an empty array and an empty array gives the empty string. Who knew? The plus operator isn't used for concatating arrays. It's used for adding strings and numbers. Deal with it.

An empty object and an empty array gives, ummm, 0. That's not actually and object. {} + [] means empty block and then +[] which converts the empty array to number. However ({} + []) or variable = {} + [] really means what you would expect and returns the same as the example above.

Whereas an empty object and an empty object is not a number. Which is true, I suppose. The same problem. When you have a real expression both are objects and so the result is "[object Object][object Object]".

Ah. It looks like true is equal to one. Iâ€™ll just check. Wow, now you discovered the strict equality operator. That means true == 1 will also surprise you?

See if you can work out what this will evaluate to Why would you write anything like this in a real app? Every language supports a simillar bullshit.

url:Javascript: the weird parts

2014-09-02
#672

Edward Beckett

Coder

More quirks... Grouping bit-wise and...

typeof ( null & "");

url:Javascript: the weird parts

2014-12-18
#704

ice

Comment 704

This entire article can be summed up as "type coercion is bad"

url:Javascript: the weird parts

2015-02-24
#725

Anon

Explanation

Here is an explanation to why

js> true===1

false

As you know:

js> typeof true

"boolean"

js> typeof 1

"number"

The === operator requires the expressions checked to have the same value as well as the same type. Since true is a Boolean while 1 is a Number, this evaluates to false. However:

js> true == 1

true

:D

url:Javascript: the weird parts

2015-08-04