JavaScript Arrays: The Difference Between [] and { }

By  on  

Using Moo 1.2 has taught me a lot about JavaScript. Of course, that means I've made a lot of mistakes but that seems to be the best way for me to learn. While browsing the Moo source, I'd always wondered the difference between arrays using brackets ([]) and braces ({}). Here's what I learned.

Use brackets for an array of simple values.

//examples
var answers = ['yes','no','maybe'];
var names = ['David','Kristina','Charlie','Angela'];

Use braces for key => value arrays and objects/properties.

//example - random array
var programmer = { 'name':'David Walsh', 'url':'https://davidwalsh.name', 'girl':'Kristina'}

//example - used for an object's properties
var Element.implement({
getText: function(){
return this.get('text');
}
});

This is similar to PHP's array system.

$arr = array('name'=>'David','position'=>'Programmer');

Have anything to add? Please share!

Recent Features

  • By
    6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    iPhone Click Effect Using MooTools or jQuery

    One thing I love about love about Safari on the iPhone is that Safari provides a darkened background effect when you click a link. It's the most subtle of details but just enforces than an action is taking place. So why not implement that...

  • By
    Generate Dojo GFX Drawings from SVG Files

    One of the most awesome parts of the Dojo / Dijit / DojoX family is the amazing GFX library.  GFX lives within the dojox.gfx namespace and provides the foundation of Dojo's charting, drawing, and sketch libraries.  GFX allows you to create vector graphics (SVG, VML...

Discussion

  1. This is interesting. So if you use []’s in a key=>value array it just won’t work or it’s simply improper usage?

    I must admit, I’ve wondered this myself with the MOO as they seem to have pretty creative looking code conventions (that really make a lot of sense).

  2. @Tim: That’s what I get from it. Please let me know if I’m wrong.

  3. Rasmus

    I feel like you’re missing one of the finer points in this bracket/brace post; braces define Objects – not Arrays!

    The following are essentially the same:

    var myArray = [];
    var myArray = new Array();
    

    … as are:

    var myObject = {};
    var myObject = new Object();
    

    Javascript is by no means perfect – so you’ll have to know the pitfalls, like erroneously mixing keys and indexes in an Array (like you can do in PHP – bad).
    As javascript doesn’t have associative arrays Objects are the closest thing.

    • Ahh!! I am so enlightened by that! Thank you! That makes so much sense now! Too many exclamations!! I need to stop but can’t!

      On a serious note, that does clarify a few questions I had.

  4. Thanks David

    U solved my problem. I am first time using Javascript in my website and i was getting one problem with one line.

     mycarousel_itemList[counter]=  
    [{url: "ID,'thumbnail', true); ?>",link: "",title: ""}]
    ;
    

    and u solved it … thanks again…regards

  5. RD

    Thanks Rasmus. This is what Exactly i was looking for.

  6. Richard

    I’m not new to JavaScript but trying to move forward, what seems to be a mistery to me is the use of punctuation ( ‘.,’:([{‘ )???. and the rules they surely must adhere too. Not one tutorial (and I have explored a lot) explains what these things actually mean and where they are to be used. It almost seems arbitrary, like learning the bizarre ‘illogical’ rules of a spoken language. Can yo help?

    Regards,
    Richard.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!