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 [123];

// Ok, looks good
// Let's add something interesting
// Has this array changed?

// No?
// What about that element

// Hmm, it's there
// So what happens when we try something crazy

// Whoaaa

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

// 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!

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

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

// 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'

// Yea... 
// But let's get back to adding wrong things to array
SyntaxErrorUnexpected token ]

// Ok, that is actually wrong, so something else
a[typeof console.log"duh";
a[a[typeof a]='huh'void a'puh';
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?

// Like nothing had happened
// So what about operators?

// Good, good, nicely reversed
// Whoaa? Dude?

// Oh yeah, I forgot about that I already have NaN in there
// console.log will reveal other interesting things for sure
  [object Object]"thanks",
  returnfunction (p)return p;},

// Hmm, there are couple of nice ones 
a.length 2;

// Sorry for that
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";

SyntaxErrorUnexpected 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({}
SyntaxErrorUnexpected token import

// One thing I haven't tried yet is doing a bit of recursion in array a;
[..meArray[3...// striped other previously messed up things


// If you would run the same thing in Node.JS you would see more explanatory

// Let's run simple one liner to try to iterate through recursive object
for(var i=0c=ac=c.meconsole.log(i)i++);

// Ok, Node.JS is still running, no simple way to kill it. 
// What about Chrome console?
for(var i=0c=ac=c.meconsole.log(i)i++);

// 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;
// Hmm I need to add some elem to array, so I can just copypaste that loop again
[undefined × 12]

// 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=0c=ac=c.me10000console.log(i)i++)console.timeEnd('evt');

// Let's try the same thing with object to see if there's any difference
var {}; o;
console.time('evt')for(var i=0c=oc=c.me10000console.log(i)i++)console.timeEnd('evt');

// 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

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!


  1. OK, it's look like fun, but you should get some basics about javascript types:

    Matthias reuters articles about java-script types at : part1, part2, part3 and part4 are a good start or the book good parts of javascript ...

    For really fun look at WAT - A lightning talk by Gary Bernhardt from CodeMash 2012

    1. java-script?

    2. Christian, thanks for links! Those are indeed really nice and well written articles and I haven't seen them before.
      And yes, Gary's WAT makes me laugh every single time :)

  2. Very entertaining reading. I learned some things, and I was amazed (not entirely positively) by a few of your examples.

  3. So, yeah. Javascript doesn't have many types of things: strings, numbers (which are `double`s), objects, functions, and undefined. Objects map strings to things.

    Javascript 'arrays' are just objects, but their internal setters and getters are a little different. If you want to meditate upon such things, meditate upon this:

    > function Arr() { this.length = 0; }; Arr.prototype = [];
    > x = Array(); y = Arr(); [x, y]
    > x = new Array(); y = new Arr(); [x, y]
    [ [], { length: 0 } ]
    > x[1] = 'abc'; y[1] = 'abc'; [x, x.length, y, y.length]
    [ [ , 'abc' ], 2, { '1': 'abc', length: 0 }, 0 ]
    > [x.toString(), y.toString(), ({1: 'abc', length: 0}).toString()]
    [ ',abc', '', '[object Object]' ]
    > [x instanceof Array, y instanceof Array]
    [ true, true ]
    > y.length = 2
    > [x.toString(), y.toString()]
    [ ',abc', ',abc' ]

    So you see that the toString() is passed over from Array to Arr in the prototype, but the special setter which notices, "oh, you're passing in a positive numerical index, I should update the length" is not passed over from Array to Arr; and the environment does not immediately recognize an Arr object as an array even though it does satisfy `instanceof Array` due to prototypical inheritance.

    Anyway, the reason why a[-1] and a[NaN] are not crazy is because they get .toString()'ed before they go in. You may have noticed that any lightweight object declared with `{}` has a toString which gives '[object Object]', which means you can do this:

    > a = {}; a[{}] = 1000; a
    { '[object Object]': 1000 }

    That's what was happening when you said a[-1]; it set a["-1"] to be a special value.

  4. None of this proves that JavaScript sucks. All it proves is that you had preconceptions about how it should work that were wrong.

    1. Arguably, a programming language which does not conform to common and helpful preconceptions is a programming language that sucks, because it adds an extra cognitive layer between "this is what I want the program to do" and "this is the code I have to write"

      That said, I love JavaScript :)

    2. Where is it claimed that this proves that javascript sucks?

    3. If a language is more powerful in certain areas, it also means it differentiates from the norm.

      Every time you learn a new language, you have to *learn* it. A lot of people coming from PHP, Java or C# think "it's just a scripting language" and underestimates the power of JavaScript and they hit a brick wall. And that's not the fault of JavaScript, but pure laziness.

  5. Most of this matches with WAT - A lightning talk by Gary Bernhardt from CodeMash 2012. And rest are mostly playing with properties in objects on JavaScript.

    Just that certain obvious preconceptions about the language needs to be changed.

  6. Most of what you did was adding new properties to `a`. That's all. As long as you use for loops (not for-in) or foreach you will never iterate over those. [1]

    An array is an object just like any other, I'll give you that typeof [] is odd but, Array.isArray is what you are looking for.


  7. Aaaa ... javascript. Enjoyed this - looking forward to more!

  8. You didn't prove that "P" equals "NP", in fact you just showed that, in Javascript, -Infinity == -Infinity-3.

    So, when you did:
    a[-Infinity+3] ='NP';

    a[-Infinty] were just replaced by 'NP'.

    1. I don't think he literally thought he solved the P=NP problem.

    2. Of couse, I just thought it could be relevant to point it out.

  9. Entertaining. :-)
    Why are some people being so defensive?

    1. I'm still happy about those responses, because they often come up with interesting sources. :)
      Maybe next time I should point out clearly that I know exactly (well, there are still things to learn) why are all those things happening.

  10. "…sometimes I'm playing stupid, but sometimes I'm actually stupid."


  11. This post reads like an obfuscation contest. There is only one JS oddity in here that is very simple and straightforward: that an array can be assigned arbitrary property names. The rest of the post just uses increasingly obfuscated code to create the property name.

  12. An array is an object: there's no reason you can't assign arbitrary properties to it.

  13. Ctrl + Shift + J for chrome

  14. Being new to Javascript, I found this tutorial very helpful. Thank you for such a great article!

    1. Thanks! But please don't take this as a tutorial. Use it rather as a list of things you should avoid ;)
      Learn the real deal from books, like from Douglas Crockford's: "JavaScript: The Good Parts".

  15. Lets complain when the browser throws errors when we use reserved words as variables! Look at that, import is on the list.

    1. And do you have a post where you complain that undefined can be redefined in some browsers? lol

  16. You're silly and you'll realize that if you spend more time using JS! :)

    Quick tips:
    * Array is just an Object.
    * The setter will check if you pass a valid index (integer >= 0) and if you don't, it will just create a property with that name on the Objects instance.
    * console.log() will only log array keys + object properties that [].propertyIsEnumerable(prop). All properties set by you on Array Objects are enumerable.
    * Using reserved keywords like `function` or `import` as identifiers is forbidden. However, you may use them as Object properties.
    You can't set a[function] but you can set a['function'] and create the `function` property which you can read using `a.function`
    `a[typeof console.log]` is same as `a['function']`, not `a[function]` since `typeof` returns a String

    * `Infinity` + anything is still `Infinity`. That's why `a[Infinity]` === `a[Infinity + 3]` (`Infinity + 3` is evaluated as `Infinity`, so you basically accessed the same Object property)

    * You need to be extra careful with the variables' scope. JS constructs like `for`, `while`, `switch` don't have their own scope. However, the problem with that `i` is even bigger. Consider this:

    // in the global scope
    i = 'Free!';
    console.log('GLOBAL: ' + i);
    // GLOBAL: Free!

    function looping() {
    for (i = 0; i < 10; i++) {
    console.log('FUNCTION: ' + i);

    // FUNCTION: 0
    // FUNCTION: 1
    // ...
    // FUNCTION: 9

    console.log('GLOBAL: ' + i);
    // GLOBAL: 10

    So, if you don't explicitly define the `i` variable inside the function using the `var` keyword, it will use the variable in the parent scope.

    One construct with it's own scope though is `with`:
    i = 'outside';
    a = {i : 'inside', j : 'extra'};

    with (a) {
    console.log(i); // inside
    console.log(j); // extra

    console.log(i); // outside
    console.log(j); // ReferenceError: j is not defined

    Cheers! :)

    P.S.: Shame on me for not reading all the comments before writing all these... I missed the part with "Maybe next time I should point out clearly that I know exactly [...] why are all those things happening" :D

  17. yes very funny and a good way to play with such a language

  18. Similarly in JavaScript you can create anonymous self executing functions. This is a function that has no name and is executed immediately. It can be used to induce a block scope and can be useful when dealing with closures within loops.
    web design lessons

  19. Nice post. Visit also this source to know how you can spy on whatsapp messages.

  20. Great blog created by you. I read your blog, its best and useful information. You have done a great work. Super blogging and keep it up.php jobs in hyderabad.

  21. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Online Training from India . or learn thru JavaScript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

  22. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress website development Chennai

  23. Nice tutorial. Thanks for sharing the valuable information. it’s really helpful. Who want to learn this blog most helpful. Keep sharing on updated tutorials…
    Best Devops online Training
    Online DevOps Certification Course - Gangboard


  24. A universal message I suppose, not giving up is the formula for success I think. Some things take longer than others to accomplish, so people must understand that they should have their eyes on the goal, and that should keep them motivated to see it out til the end.

    Selenium training in Chennai
    Selenium training in Bangalore
    Selenium training in Pune
    Selenium Online training

  25. Try to play popular games in the best online casino in history. great gambling slots Play a lot and get even more wins.

  26. Well researched article and I appreciate this. The blog is subscribed and will see new topics soon.
    python training Course in chennai
    python training in Bangalore
    Python training institute in bangalore

  27. Really useful information. Thank you so much for sharing.It will help everyone.Keep Post.
    Selenium Training in Chennai | SeleniumTraining Institute in Chennai

  28. The article is so informative. This is more helpful for our
    software testing training online
    best selenium online training in chennai. Thanks for sharing

  29. thanks for your details it's very useful and amazing.your article is very nice and excellentweb design company in velachery

  30. You have provided a nice article, Thank you very much for this one. And I hope this will be useful for many people. And I am waiting for your next post keep on updating these kinds of knowledgeable things
    Java Training in Chennai
    Java Training in Coimbatore
    Java Training in Bangalore

  31. It's really nice and meanful. it's really cool have really helped lots of people who visit blog and provide them useful information.web design company in velachery

  32. Here is a set of mobile spyware for your tech-savvy readers. Interesting, is it possible to write such apps on JavaScript?

  33. Nice Post
    For Data Science training in Bangalore, Visit:
    Data Science training in Bangalore

  34. Check out this page on hacking whatsapp online from Cocospy guide. The explanation by the writer is incredible, I am not that tech savvy but able to understand in one reading time!

  35. Read this Spyic guide to learn hacking Whatsapp by phone number. I have read it and it is gold. You will need to download an app though from its official website, but it is all worth it as we do no need to know any script. All automatic.