2

I have the weirdest thing happening to some integers in my front-end.

Javascript, true to its legacy, decides to decrement integers if I decide to add them to a string. Not all, mind you, but only some, because if it was all that would be too simple.

Here is an example.

var jid = 10152687447723705;
$('#slide_2_inner').html("<img src='//graph.facebook.com/"+jid+"/picture?width=80&height=80' width='80' height='80' />");

This code fetches the Facebook profile picture of user with ID 10152687447723705 (a friend of mine) and displays it inside the slide_2_inner div. Or at least it's supposed to, because when the HTML shows up, the image location is wrong. Why is it wrong? Because instead of //graph.facebook.com/10152687447723705/picture?width=80&height=80 it's //graph.facebook.com/10152687447723704/picture?width=80&height=80.

So, you see, 10152687447723705 got turned into 10152687447723704, somehow.

When I do this instead...

var jid = "10152687447723705";
$('#slide_2_inner').html("<img src='//graph.facebook.com/"+jid+"/picture?width=80&height=80' width='80' height='80' />");

...the URL is created correctly and the image shows up.

But wait, it gets worse. Let's try the first way again, but with a different Facebook ID:

var jid = 1593894704165626;
$('#slide_2_inner').html("<img src='//graph.facebook.com/"+jid+"/picture?width=80&height=80' width='80' height='80' />");

Guess what? It works! The image shows up.

So, the question is, why is this craziness happening and how do I stop it from happening?

Could it have to do with the fact that one number is odd and the other is even? I don't have enough data to confirm the pattern.

In the example that doesn't work, doing jid = jid.toString() doesn't change anything.

The main thing for me is understanding the root cause. I'm sure I could find some hacky solution, put the integer through some function to turn it into something that will work, but I'd prefer to get to the bottom of this properly.

sveti petar
  • 3,637
  • 13
  • 67
  • 144
  • 1
    Chances are `10152687447723705` cannot be exactly represented in Javascript's number model. Better stick with strings. – Frédéric Hamidi Dec 17 '14 at 17:14
  • 1
    *Javascript, true to its legacy, decides to decrement integers if I decide to add them to a string* No, it doesn't. It's just that IEE-754 double-precision floating point gets really imprecise at that kind of value. – T.J. Crowder Dec 17 '14 at 17:15
  • 2
    So, related, possible duplicate: [Is floating point math broken?](http://stackoverflow.com/q/588004/464709) – Frédéric Hamidi Dec 17 '14 at 17:15
  • @T.J.Crowder You're right, of course, I was venting a bit because I had a different issue with integer/string combos in JS recently. – sveti petar Dec 17 '14 at 17:18

1 Answers1

4

The maximum integer value that is safe to use in JS is 2^53 - 1 (Number.MAX_SAFE_INTEGER). Integer values higher than that are prone to precision errors.

Facebook IDs are usually larger than that, thus they have to be represented by a string. That should not be a problem since one does not use IDs for mathematically computations anyway.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143