Fun with JavaScript Arrays

The first thing I usually run into when trying new programming languages are some weird corner case behaviors, so I decided to run into those on purpose and write one of my first blog posts about that.

Couple of notes before we begin:

• I've tried all those examples in Google Chrome Console - command+option+I on Mac and hopefully similar keys on Win/Linux
• When reading this article you might need to stop and think. Stop and Think!
• Also keep in mind that sometimes I'm playing stupid, but sometimes I'm actually stupid.

// Let's say we have an array with three elements, this can't hurt
> var a = [1, 2, 3];
> a
[1, 2, 3]

// Ok, looks good
// Let's add something interesting
> a[-1] = 4;
// Has this array changed?
> a
[1, 2, 3]

// No?
// What about that element
> a[-1]
4

// Hmm, it's there
// So what happens when we try something crazy
> a[NaN] = 5;
> a
[1, 2, 3]

// Whoaaa

// Let's try couple of others
> a[-Infinity] = "P";
> a[-Infinity+3] = "NP";
// No error yet, so let's do a little check
> a[-Infinity] === a[-Infinity+3]
true

// Did I just prove that P=NP? Never-mind, we shouldn't get distracted
// by unimportant problems. So how could I see what's inside a? console.log!
> console.log(a);
[1, 2, 3, -1: 4, NaN: 5, -Infinity: "NP"]

// Hmm, this kinda looks like it's messed up array with object
// So let's check
> typeof a
"object"

// Type of array is object? Really?
> typeof []
"object"

// Indeed it is, I almost forgot about this ~'Good Part'
// Now that I have entertained myself... inverting string bitwise, heh...
// Actually, what is the result?
> ~'Good Part'
-1

// Yea... 
// But let's get back to adding wrong things to array
> a[function]='err';
SyntaxError: Unexpected token ]

// Ok, that is actually wrong, so something else
> a[typeof console.log] = "duh";
> a['~'] = '<';
> a[a[typeof a]='huh', void a] = 'puh';
> a[{do: 'break'}] = 'thanks';
> a.continue = ["-",+"you"+"","+"][3,2,1][2];
> a.return = function(p){ return p;};

// I'm starting to feel bad about abusing this little array a so much. 
// Are you ok little fella?
> a
[1, 2, 3]

// Like nothing had happened
// So what about operators?
> a[a|a] = 3;
> a[-~a&-~a] = 2;
> a[-~-~!a] = 1; 
> a
[3, 2, 1]

// Good, good, nicely reversed
> a['!'-1]
5

// Whoaa? Dude?
> '!'-1
NaN

// Oh yeah, I forgot about that I already have NaN in there
// console.log will reveal other interesting things for sure
> console.log(a);
[  
  -Infinity: "NP",
  0: 3,
  1: 2,
  2: 1,
  -1: 4,
  NaN: 5,
  [object Object]: "thanks",
  continue: "N",
  function: "duh",
  length: 3,
  object: "huh",
  return: function (p){ return p;},
  undefined: "puh",
  ~: "<"
]

// Hmm, there are couple of nice ones 
> a.length = 2;
> a
[3, 2]

// Sorry for that
> a[{}];
"thanks"
> a['[object Object]'] = "you're welcome";

// Also, where did that continue: "N" come from? Was that from example with N=NP?
// Not really... that actually reminds me of one episode from my famous 
// "JavaScript sucks" series:
// You should try this one. Just put the following into your favorite JS console:
// Or are you afraid of JavaScript? :)
> (({}-1)+"")[2]+({}+[])[1]+" "+((~-1<~[0])+"")[1/(1/0)]+((/./>/^/)+"")[4]+(""+!!(3^3))[1]+(""+!!(_="$"))[1]+"!"
// ... result stripped ... I won't make it that easy for you.

// Let's reveal one of the sneaky ones 

// (that has actually nothing to do with arrays):
> a[100] = "Never gonna \
give you up,";
> a[101] = "Never gonna \ 
let you down";
SyntaxError: Unexpected token ILLEGAL

// Wow ... I thing I have been just Rickrolled by Chrome interpreter
// and I thought he would never gonna run around and desert me
// Do you know how this happened? BroTip: Try to copypaste it into your console.

// Talking about Syntax Errors, let's say we need a function that performs

// this importing-like functionality for us. Let's call it import.
> function import() {}
SyntaxError: Unexpected token import

// One thing I haven't tried yet is doing a bit of recursion in array
> a.me = a;
> console.log(a);
[... me: Array[3] ...] // striped other previously messed up things

> console.log(a.me.me.me)
[... me: Array[3] ...]

// If you would run the same thing in Node.JS you would see more explanatory
> console.log(a.me.me.me)
[ me: [Circular] ]

// Let's run simple one liner to try to iterate through recursive object
> for(var i=0, c=a; c=c.me; console.log(i), i++);
0
1
...
26012391
...

// Ok, Node.JS is still running, no simple way to kill it. 
// What about Chrome console?
> for(var i=0, c=a; c=c.me; console.log(i), i++);
0
1
...
314
...
2679
...

// Chrome died. Goodbye a. See you in Silicon Heaven.

// That reminds me of good old times when I tried to view 5MB XML without 

// line breakings in Chrome, Opera, IE, Firefox...

// Let's start chrome console again with clean array
> var a = [];
> a.me = a;
// Hmm I need to add some elem to array, so I can just copypaste that loop again
> a[1] = 2
> a
[undefined × 1, 2]

// That's interesting - array is 'filled up' with undefineds and Chrome
// prints that out neatly
// Let's test how long this loop take
> console.time('evt'); for(var i=0, c=a; c=c.me, i < 10000; console.log(i), i++); console.timeEnd('evt');
evt: 1552.587ms

// Let's try the same thing with object to see if there's any difference
> var o = {};
> o.me = o;
> console.time('evt'); for(var i=0, c=o; c=c.me, i < 10000; console.log(i), i++); console.timeEnd('evt');
evt: 1610.678ms

// Not really - so what to take from this: Arrays are Objects, essentially.

// And yes, proving that by executing console.log multiple times is just

// plain stupid.

// One last interesting thing
> i
10000

There are not many languages where you can access index from for loop after the loop ends. JavaScript is one of them, since it uses function scopes rather than block scopes and variable declarations are hoisted to the top of a function, but about that later.

Let's stop making fun of languages that suck and let's continue with that next time. We will have a look at comparing things. Also note that I really enjoy programming in JavaScript, but that doesn't mean I cannot rant about it's bad parts. And it's good parts. And my job and everything. 

Do you like what you have just read? Do you hate it? Leave me a comment!