Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Create a Sheen Logo Effect with CSS

    I was inspired when I first saw Addy Osmani's original ShineTime blog post.  The hover sheen effect is simple but awesome.  When I started my blog redesign, I really wanted to use a sheen effect with my logo.  Using two HTML elements and...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • By
    Rotate Elements with CSS Transformations

    I've gone on a million rants about the lack of progress with CSS and how I'm happy that both JavaScript and browser-specific CSS have tried to push web design forward. One of those browser-specific CSS properties we love is CSS transformations. CSS transformations...

  • By
    Reverse Element Order with CSS Flexbox

    CSS is becoming more and more powerful these days, almost to the point where the order of HTML elements output to the page no longer matters from a display standpoint -- CSS lets you do so much that almost any layout, large or small, is possible.  Semantics...

Discussion

  1. Tim Novinger

    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. david

    @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.

    • Kyle

      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. Mantasha Zaara

    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!