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
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Incredible Demos

  • By
    Fancy FAQs with MooTools Sliders: Version 2

    A little over a year ago I authored a post titled Fancy FAQs with MooTools Sliders. My post detailed a method of taking boring FAQs and making them more robust using the world's best JavaScript framework: MooTools. I've taken some time to...

  • By
    WebSocket and Socket.IO

    My favorite web technology is quickly becoming the WebSocket API. WebSocket provides a welcomed alternative to the AJAX technologies we've been making use of over the past few years. This new API provides a method to push messages from client to server efficiently...

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!